Combine CSS Attribute and Pseudo-Element Selectors

Combine CSS Attribute and Pseudo-Element Selectors?

This looks like a bug, which has finally been reported. If you add a CSS rule for div[title] anywhere in your stylesheet with at least one declaration, your div[title]:after rule will magically apply. For example:

div:after {
    content: "NO";
}
div[title] {
    display: block;
}
div[title]:after {
    content: "YES";
}

See the updated fiddle.

It also seems to have something to do with your second div having or not having certain HTML attributes, as shown in the comments below.

Using CSS pseudo and attribute selectors together

Your :nth-last-of-type syntax is a bit off — it's either :last-of-type or functional :nth-last-of-type() with a formula an+b as an argument.

The pseudo-classes pertaining to "type" refer to the element type, represented by its tag name. It does not mean "the last element matching the rest of this selector".

If, for example, the last element matching .left[class^='col'] is not the last span element, then :last-of-type will not match. You'll have to modify your HTML to either segregate those span elements from others, or add a class to the last such element, before you can target it with a selector.

WebKit does not have any issues with pseudo-classes and attribute selectors that I'm aware of (or if it did, those issues have long been fixed). It does have issues with pseudo-elements, which I address here, where the fiddle link originates.

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.

Why can't I combine pseudo-element selectors?

You are combining multiple vendor-specific selectors into a single CSS rule.

This means that if one of the selectors is not recognised by the browser, the entire CSS block is ignored. In this particular case, Chrome does not recognize ::-moz-range-track, because it is specific to Firefox/Gecko. This is not a quirk, but intended behaviour and part of the CSS standard.

The solution would be to split the declarations. Like so:

.range2::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    border: 1px solid black;
}
.range2::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    border: 1px solid black;
}

Updated CodePen

How do I combine pseudo-elements with pseudo-classes?

You can chain :not() pseudo-class with :nth-child() selector like this.

li {  margin-bottom: 10px;}li:after {  content: '';  display: block;  width: 0;  height: 3px;  background: #009688;  transition: width .8s;}li:not(:nth-child(1)):not(:nth-child(3)):hover:after {  width: 100%;}

<ul>  <li>first</li>  <li>second</li>  <li>third</li>  <li>forth</li>  <li>fifth</li></ul>

tr[id^="foo"][id$="bar"]

#black:target::before, #red:target::before { background: #ACAA92; }

#black:hover .text,
#com:hover .text {
  display:block;
}