Combining Pseudo-Selectors in CSS

Combining Pseudo-classes in CSS?

Yes, you can combine pseudo-classes 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.

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>

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

Can I combine pseudo-classes in CSS like this?

I solved the problem with the help of dummy lines:

HTML

<table>
<tr><th>Heading 1</th></tr>
<tr style="display:none;"><th></th></tr> <!-- dummy line -->
<tr><td>key1</td><td>val1</td></tr>
<tr><td>key2</td><td>val2</td></tr>
<tr><th>Heading 2</th></tr>
<tr style="display:none;"><th></th></tr> <!-- dummy line -->
<tr><td>key3</td><td>val3</td></tr>
</table>

CSS

table tr:nth-child(even) td {
    background-color: gray;
}

Demo

http://jsfiddle.net/MartyIX/fdtpL/3/

I'm not really proud of it but I've lost too much time with that.

Combining multiple pseudo-selectors

The :visited pseudoclass can't be used for most styling in a lot of modern browsers anymore because it's a security hole. See this link for a more formal discussion on it.

The short version is that if you can style :visited links differently, you can use that to determine if people have visited various sites, and therefore target them based on their browser history. Most modern browsers therefore heavily restrict the styling that can be done on them.

You can still chain pseudoselectors. For example, a:focus:hover works just fine to apply styles only if the element is focused AND hovered. See this link for a demonstration.

Chain CSS Pseudo Selectors

This happens because ::selection is a pseudo element. There's a good explanation for this here.

What's the right way of combining CSS multiple pseudo-elements?

All selectors which should share the same properties and values can simply be comma separated. You can write them all on one line though a more preferred style is to put each one its own line to aid readability:

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

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

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors#Groups_of_selectors_on_one_rule

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.

How to use pseudo selectors in material-ui?

After a while fighting to have your code up and running I found what is wrong with your code.

Everything seems to be fine, the selector for rootListItem works right out of the box, the problem is that you can not use the pseudo-selector :hover on an element that has display: none. Instead you should be using opacity: 0 and opacity: 1, it will hide your ListItemSecondaryAction but at the same time it will allow you to hover. So, elements with display: none, doesn't technically display and thereby, you cannot hover them.

About your pseudo selector in global, you just wrote it wrongly. Using colon instead of dot after div and changing backgroundColor to 'yellow' instead of "'yellow',"

'li > div:nth-of-type(1)': {
        display: 'block !important',
        backgroundColor: 'yellow',
    },

I didn't know how does your TreeMenu look like as a component, so I just created a list with ul / li / div nodes.

const styles = {
root: {
    backgroundColor: 'white',
    '&:hover': {
        backgroundColor: '#99f',
    },
},
hoverEle: {
    visibility: 'hidden',
    '&:hover': {
        visibility: 'inherit',
    },
},
rootListItem: {
    backgroundColor: 'white',
    opacity: 0,
    '&:hover': {
        opacity: 1,
        backgroundColor: '#99f',
    },
},
'@global': {
    'li > div:nth-of-type(1)': {
        display: 'block !important',
        backgroundColor: "yellow",
    },
},
};

And:

<div>
    {treeNode.map(node => (
        <ListItem
            key={`${node.Type}|${node.NodeID}`}
            id={`${node.Type}|${node.NodeID}`}
            className={classes.root}
            button
            divider
            disableGutters={false}
            dense
            onClick={() => {}}
            title={''}
            onMouseOver={() => {}}
        >
            <ListItemText primary={node.NodeName} />
            <ListItemSecondaryAction classes={{ root: classes.rootListItem }}>
                <ul><li><div>Elem 1</div></li><li><div>Elem 2</div></li></ul>
            </ListItemSecondaryAction>
            <div className={classes.hoverEle}>
                <ul><li><div>Elem 1</div></li><li><div>Elem 2</div></li></ul>
            </div>
        </ListItem>
    ))}
</div>

*I am using treeNode that is an array for me and I removed the rest of the functions and TreeMenu.

Combining pseudo element and pseudo class won't work

It seems that the CSS code #breadcrumbs li:nth-child(2)::before {content: ">"} was fine, and the problem was due to id-class clashing in the html.twig template files.

What solved the issue was changing in breadcrumb.html.twig, from:

{% if breadcrumb %}
  <nav class="breadcrumb" role="navigation" aria-labelledby="system-breadcrumb">
    <h2 id="system-breadcrumb" class="visually-hidden">{{ 'Breadcrumb'|t }}</h2>

To:

{% if breadcrumb %}
  <nav role="navigation" aria-labelledby="system-breadcrumb">
    <h2{{ 'Breadcrumb'|t }}</h2>

Now, the #breadcrumbs id directives, don't clash with either these of .breadcrumb class, or #system-breadcrumb id.