How should grouping be combined properly with child and descendant selectors?_问答_开发者

How should grouping be combined properly with child and descendant selectors?

开发者 https://www.devze.com 2022-12-24 06:40 出处：网络

Child and descendant selectors have been leaking to every element on my html structure and I found out that this happens when I combine grouping with it.

This affects all elements on the whole document:

ul#topnav > li a, a:hover, a:focus{
 font-size: 14px;
 color: #C2C5CC;
 text-decoration: none;
 padding:0px;
}

while this only affects what it is suppose to affect leaving all elements outside of the specified selection criteria alone:

开发者_StackOverflow社区

ul#topnav > li > a{
 font-size: 14px;
 color: #C2C5CC;
 text-decoration: none;
 padding:0px;
}

ul#topnav > li > a:hover{
 font-size: 14px;
 color: #C2C5CC;
 text-decoration: none;
 padding:0px;
}

ul#topnav > li > a:focus{
 font-size: 14px;
 color: #C2C5CC;
 text-decoration: none;
 padding:0px;
}

How should grouping be combined properly?

You were very close. CSS grouping requires repeating the complete selector (ul#topnav > li):

ul#topnav > li > a, 
ul#topnav > li > a:hover,
ul#topnav > li > a:focus{
 font-size: 14px;
 color: #C2C5CC;
 text-decoration: none;
 padding:0px;
}

This can now be achieved using the :where and :is pseudo selectors:

ul#topnav > li :is(a, a:hover, a:focus){
 font-size: 14px;
 color: #C2C5CC;
 text-decoration: none;
 padding:0px;
}

ul#topnav > :is(li#barp, li#boop:hover) :is(a:hover, a:focus){
  background-color: black;
  font-size: 14px;
  color: white;
  text-decoration: none;
  padding:0px;
}

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>

<ul id="topnav">
  <li id="boop">One <a href="#">1</a></li>
  <li id="boop">Two <a id="boop" href="#">2</a></li>
  <li id="barp">Three <a href="#">3</a></li>
  <li id="boop">Four <a href="#">4</a></li>
  <li id="blip">Five <a href="#">5</a></li>
</ul>

</body>
</html>

I'd previously tested this using the below:

div> :is(#div2:hover, #div3)>span {
  background-color: pink;
  color: black;
}

div> :where(#div1:hover, #div3) {
  background-color: purple;
  color: white;
}

<!DOCTYPE html>
<html>

<head>
  <style></style>
</head>

<body>

  <div id="divA">
    <div id="div1">Some 1...</div>
    <div id="div2">Some <span>2</span>...</div>
    <div id="div3"><span>Some</span> 3...</div>
  </div>

</body>

</html>

According to Mozilla whilst :is has more specificity, it can't use pseudo selectors internally. However, whilst I couldn't find either on w3schoools, you can see that what I have tested worked with :is and :where. I realise that @nest / & nesting is on the horizon, which will be another answer to this, but this is probably what the OP was after, and what I was, too.

For The Record - I realise this is an old question, but it was one of my first finds. If I'm off, of course, edits / comments are welcome for corrections ... but it'd be nice for everyone to know why, so that it can be seen as a definitively wrong answer.