Associating Multiple Selectors with a Pseudo-Class

Associating multiple selectors with a pseudo-class

Your shot in the dark is actually very close to what's proposed for Selectors 4, except it takes the form of its own pseudo-class, :matches() (with the parentheses and the same comma-delimited syntax):

:matches(a, button, img):hover, :matches(a, button, img):focus {
    border: 2px dashed black;
}

which can be further simplified to:

:matches(a, button, img):matches(:hover, :focus) {
    border: 2px dashed black;
}

As it's not yet implemented outside of internal prefixes, you'll have to make do with writing it all out manually in the meantime:

a:hover, button:hover, img:hover,
a:focus, button:focus, img:focus {
    border: 2px dashed black;
}

Or make use of a preprocessor to do all the heavy lifting for you.

Structural Pseudo Classes and attribute selectors doesn't work together

Pseudo-classes use only one colon, so it's :first-child, not ::first-child.

But your first input[type='file'] is not the first child, so you can't use :first-child with it anyway.

You have to switch the rules around and use a sibling selector instead to hide the subsequent file upload inputs:

.field input[type='file'] {
    display:block;
}

.field input[type='file'] ~ input[type='file'] {
    display:none;
}

This technique is further described here, and can be used for most other simple selectors, not just classes and attributes.

How to use the CSS pseudo element :before in multiple classes of same element

Here you are SIR

demo: http://jsfiddle.net/7UjgL/

the style:

.letter{
 width:40px;
 height:20px;
position:relative;  
letter-spacing: 26px;
}

.letter:first-letter{
color:red; 
}

.letter:before,.letter:after{
    position:absolute;
    top: 0px;
}
.letter:before{
    content: 'o';
    color: green;
    left: 11px;
}

.letter:after{
    content:'n';
    color:blue;
    left: 22px;
}

the markup:

<div class=letter>ze</div>

Applying two pseudo class in one element

Looks like you can simply reverse your order and you're good to go:

footer:hover:before

pseudo elements should come after pseudo classes.

Multiple :selectors on one CSS element?

That specific example is completely valid, it works as demonstrated here.

As of now, the main limitation(s) pertaining to pseudo elements, is that:

CSS3 Selectors - 7. Pseudo-elements (reference)

Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector. Note: A future version of this specification may allow multiple pseudo-elements per selector.

Thus, neither of the following selectors would work: p:hover:after:after, p:after:hover

There is no limit on the number of simple selectors that can be chained together within the selector. And as @BoltClock states in the comments, there can only be one type selector or universal selector.

CSS3 Selectors - 4. Selector syntax (reference)

A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector.

Here is a relevantly long selector that works: (example)

#parent:first-of-type:first-child > .child:last-child p:not(#element):not(#otherelement):hover:after

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.

How to chain pseudo selectors in SASS

a
  &:visited:hover
    attribute: foo

Nowadays, this is the only valid form. Indention has to be consistent (2 spaces are recommended) and the colon follows the attribute.

Less multiple classes and pseudo classes with the same style?

.push-nav > .active > a is missing because you haven't included it.

The ampersand & represents the current selector.

Add:

.push-nav > .active > a {
    &,
    &:focus,
    &:hover {
        background: #00;
        color: #fff;
    }
}

In your code & = .push-nav > .active > a. So &:focus = .push-nav > .active > a:focus.

---

Related Topics