Search code examples
csscss-selectorsgroupingdescendant

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:

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?

Solution

  • 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;
}