Multiple CSS Pseudo Classes
: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 ;)
CSS multiple pseudo classes and pseudo elements
Yes it works, see the snippet below.
footer ul.footer-menu li:not(:first-child):after {
content: 'added some text';
color: red;
}
<footer>
<ul class="footer-menu">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut tempora voluptatum praesentium rem culpa, cupiditate quas animi commodi voluptates? Cupiditate error cum suscipit dolorum deleniti? Non dolore, cumque assumenda voluptatum.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut tempora voluptatum praesentium rem culpa, cupiditate quas animi commodi voluptates? Cupiditate error cum suscipit dolorum deleniti? Non dolore, cumque assumenda voluptatum.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut tempora voluptatum praesentium rem culpa, cupiditate quas animi commodi voluptates? Cupiditate error cum suscipit dolorum deleniti? Non dolore, cumque assumenda voluptatum.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut tempora voluptatum praesentium rem culpa, cupiditate quas animi commodi voluptates? Cupiditate error cum suscipit dolorum deleniti? Non dolore, cumque assumenda voluptatum.</li>
</ul>
</footer>
Is it ok to use multiple pseudo-elements in css?
Sure you can - http://jsfiddle.net/WQBxk/
p:before {
content: "BEFORE ";
display: block;
}
p:first-child:before {
content: "1ST";
display: block
}
The bad - it won't work in IE7 and below. Not because of the multiple pseudo selectors, but because of non-supported :before
- http://kimblim.dk/css-tests/selectors/
Just tested in IE8 - works well.
Multiple Pseudo Classes on a Single Selector
Combo first-child
and :hover
is correct(IE6 recognize only last pseudo-class in the chain):
div span:first-child:hover {
color: red;
}
<div>
<span>asdasd</span>
<span>asdasd</span>
<span>asdasd</span>
</div>
Can I have multiple :before pseudo-elements for the same element?
In CSS2.1, an element can only have at most one of any kind of pseudo-element at any time. (This means an element can have both a :before
and an :after
pseudo-element — it just cannot have more than one of each kind.)
As a result, when you have multiple :before
rules matching the same element, they will all cascade and apply to a single :before
pseudo-element, as with a normal element. In your example, the end result looks like this:
.circle.now:before {
content: "Now";
font-size: 19px;
color: black;
}
As you can see, only the content
declaration that has highest precedence (as mentioned, the one that comes last) will take effect — the rest of the declarations are discarded, as is the case with any other CSS property.
This behavior is described in the Selectors section of CSS2.1:
Pseudo-elements behave just like real elements in CSS with the exceptions described below and elsewhere.
This implies that selectors with pseudo-elements work just like selectors for normal elements. It also means the cascade should work the same way. Strangely, CSS2.1 appears to be the only reference; neither css3-selectors nor css3-cascade mention this at all, and it remains to be seen whether it will be clarified in a future specification.
If an element can match more than one selector with the same pseudo-element, and you want all of them to apply somehow, you will need to create additional CSS rules with combined selectors so that you can specify exactly what the browser should do in those cases. I can't provide a complete example including the content
property here, since it's not clear for instance whether the symbol or the text should come first. But the selector you need for this combined rule is either .circle.now:before
or .now.circle:before
— whichever selector you choose is personal preference as both selectors are equivalent, it's only the value of the content
property that you will need to define yourself.
If you still need a concrete example, see my answer to this similar question.
The legacy css3-content specification contains a section on inserting multiple ::before
and ::after
pseudo-elements using a notation that's compatible with the CSS2.1 cascade, but note that that particular document is obsolete — it hasn't been updated since 2003, and no one has implemented that feature in the past decade. The good news is that the abandoned document is actively undergoing a rewrite in the guise of css-content-3 and css-pseudo-4. The bad news is that the multiple pseudo-elements feature is nowhere to be found in either specification, presumably owing, again, to lack of implementer interest.
Combining Pseudo-selectors in CSS?
If you're talking about pseudo-classes, then yes, you can combine them in any order.
Except in this case, ::selection
is not a pseudo-class, it's a pseudo-element that's not part of CSS1 or CSS2, or any current spec for that matter. And this is where the term "pseudo-selector" falls short, because they're two completely different things.
The correct syntax is a single colon for :hover
and double colons for ::selection
, and unlike pseudo-classes, pseudo-elements must always come last:
.abc:hover::selection{color:red}
And even then, because of the way ::selection
works (or doesn't), it's not guaranteed to actually have an effect in browsers.
After-Before pseudo in CSS3 for multiple classes
Consider this HTML structure, where you have a <div>
which have children <span>
and <p>
. And another <span>
and <p>
as siblings.
<div>
<span>abc</span>
<p>xyz</p>
</div>
<span>123</span>
<p>456</p>
For example, if we need to change the colour of the children, we could write on your way,
div span, p{
color: red;
}
This problem with this is that, it will change the colour of the sibling <p>456</p>
too as the style is applied globally to all the paragraph tags.
And the solution is to follow specificity as we did with the <span>
and write the selectors as
div span,
div p{
color: red;
}
The same rule applies to pseudo-elements as well. Hence the solution is,
[class*="divclass-"]::before,
[class*="divclass-"]::after{
border-radius: 50%;
width: 30%;
height : 30%;
border: 3px solid red;
}
Note 1
If you are working on SASS, your syntax could be,
[class*="divclass-"]{
&::before,
&::after{
border-radius: 50%;
width: 30%;
height : 30%;
border: 3px solid red;
}
}
Note 2
The before
and after
pesudo-elements require the content
property.
Hope this helps.
Can't add multiple pseudo-classes to a :not() pseudo-class
Multiple classes selectors to :not
is only supported in CSS selectors level 4 and it doesn't work in all browsers. It currently only works in Safari
, instead you could use multiple :not
.div-list div:not(:last-child):not(:first-child) {
border:1px solid blue;
}
Check the browser support doc
Related Topics
Datagrid/Celltable Styling Frustration -- Overriding Row Styles
Background-Position Not Working with CSS Animation and Linear Gradient
CSS Use Color from Another Class
Are CSS Variable Changes Possible Upon a Radio Button's Checked Selector Being Triggered
CSS Filter Cancels Element Position
CSS Menu - Keep Parent Hovered While Focus on Submenu
How to Use Transform-Origin in Conjunction with Svgs
Asset Pipeline Undefined Variable SASS
Clip-Path:Circle() Radius Doesn't Seem to Be Calculated Correctly
Font-Face Embedded Fonts Look Fuzzy in Windows 7 Browsers
Why Border of <Tr> Not Showing in Ie
Svg Spritesheet Targeting with CSS
CSS Hover Menu Appearing Behind PDF Iframe