Multiple CSS Pseudo Classes
Solution 1
:last-child
is a pseudo-class, whereas :after
(or ::after
in CSS3) is a pseudo-element.
To quote the standard:
Pseudo-classes are allowed anywhere in selectors while pseudo-elements may only be appended after the last simple selector of the selector.
This means your syntax is correct according to CSS2.1 and CSS3 as well, i.e. IE8 still sucks ;)
Solution 2
You could use the adjacent sibling selector:
ul.phone_numbers li + li:before {
content: ",";
}
Solution 3
There is no problem nesting pseudo class selectors as long as the rules applied match the particular element in the DOM-tree . I want to echo the possibilities of styling with pseudo class selectors from w3 website . That means you can also do stuff like :
.ElClass > div:nth-child(2):hover {
background-color: #fff;
/*your css styles here ... */
}
Solution 4
You can get around this by having a another tag inside the <li/>
and apply the :after
to that instead. That way you would be applying the :last-child
and :after
to different elements:
ul.phone_numbers li > span:after {
content: ",";
}
ul.phone_numbers li:last-child > span:after {
content: "";
}
Solution 5
IE8 doesn't support last-child :( They're focused on sorting out CSS 2.1 support it looks like. Why microsoft haven't adopted Gecko or Webkit yet I don't know.
http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#pseudoclasses
Related videos on Youtube
Brian Fisher
Vice President of Engineering at Pramata, an amazing B2B SaaS company providing the essential intelligence from contracts and billing systems to help retain and grow companies most valuable customer accounts. Fan of tennis and Rock Climbing.
Updated on July 09, 2022Comments
-
Brian Fisher almost 2 years
What is the proper CSS syntax for applying multiple pseudo classes to a selector. I'd like to insert "," after each item in a list except the last one. I am using the following css:
ul.phone_numbers li:after { content: ","; } ul.phone_numbers li:last-child:after { content: ""; }
This works fine on FF3, Chrome and Safari 3. IE7 doesn't work because it doesn't support :after (as expected). In IE 8 this renders with a comma after each li including the last one. Is this a problem with IE8 or is my syntax incorrect? It's ok if it doesn't work in IE8 but I would like to know what the proper syntax is.
-
Brian Fisher over 15 yearsThanks for the info and explanation. Is my syntax correct? Just in case IE9 supports last-child.
-
roborourke over 15 yearsYeah the syntax is fine, as the other guys have said :)
-
Ankur Loriya about 9 yearsCan I write element:hover:disable {} multiple pseudo-classes ? Is it good practice ?