How should grouping be combined properly with child and descendant selectors?
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.
加载中,请稍侯......
精彩评论