What Does the "+" (Plus Sign) CSS Selector Mean

What does the + (plus sign) CSS selector mean?

See adjacent selectors on W3.org.

In this case, the selector means that the style applies only to paragraphs directly following another paragraph.

A plain p selector would apply the style to every paragraph in the page.

This will only work on IE7 or above. In IE6, the style will not be applied to any elements. This also goes for the > combinator, by the way.

See also Microsoft's overview for CSS compatibility in Internet Explorer.

Meaning of SASS (SCSS) plus sign and ampersand syntax ( + & ) to the right of a selector?

I found an online SASS compiler and plugged this code in and got.

.feature-title + .listing-feature__summary {
  color: #f00;
}

This ends up being a sibling selector.

https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator

How to use the plus sign process of css selectors in LESS?

You can use & to refer to the parent selector:

li:first-child {
    border-right: solid 0.188em #da291c;
    padding: 0 2em 0 0;

    & + li {
        padding: 0 0 0 2em;

        & + li {
            padding: 0 2em 0 0;
            border-right: solid 0.188em #da291c;
            margin-left: 21%;

            & + li {
                padding: 0 0 0 2em;
            }
        }
    }
}

You could also use :nth-child, it might be more appropriate for what you are trying to do, but check browser support http://caniuse.com

What does the (greater-than sign) CSS selector mean?

> is the child combinator, sometimes mistakenly called the direct descendant combinator.¹

That means the selector div > p.some_class only matches paragraphs of .some_class that are nested directly inside a div, and not any paragraphs that are nested further within. This implies that every element matching div > p.some_class necessarily also matches div p.some_class, with the descendant combinator (space), so the two are understandably often confused.

An illustration comparing the child combinator with the descendant combinator:

div > p.some_class { 
    background: yellow;
}

div p.some_class { 
    color: red;
}

<div>
    <p class="some_class">Some text here</p>     <!-- [1] div > p.some_class, div p.some_class -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- [2] div p.some_class -->
    </blockquote>
</div>

Does a trailing plus sign on the left make sense in SASS

While valid, adding an ampersand before the combinators is not necessary at all. The ampersand is only needed for attribute selectors, pseudo classes, and pseudo elements, because the real difference between those using & and those not (in theory) is the space in the output. Here's a good article on this.

CSS: Does the plus sign work with pseudo elements?

Basically, what Michael_B said:

You can't target a pseudo-element. A pseudo-element is added to a selector that has matched an element.

"Target" is a vague term, but the second sentence is on point here. Combinators only work with elements, because selectors match elements, not pseudo-elements. What you're really trying to do in selector nomenclature is to style the ::after pseudo-element of a div whose last child is a p element (in which case the ::after box immediately follows the p box in the formatting tree):

<div>
    <p>hello world</p>
    div::after <!-- Blue border -->
</div>
<div>
    <h4>hello world</h4>
    div::after <!-- Red border -->
</div>

And you can't do that, because there is no parent selector.

I imagine something like div:has(> p:last-child)::after from Selectors 4 will work, but it depends on whether :has() makes it into CSS in the first place. The only other good option is to figure out which of these div elements has a p as their last child and assign them a special class name.

CSS select a class containing plus sign +

You'd need to escape the plus sign as it has a special meaning in CSS, by using a leading backslash \ as follows:

.frme_150\+1 {
    background-position: 150px 1px;
}

Working Demo.

Or escape the '+' to '\2b ' or '\00002b' (six hexadecimal digits)

Also, you can achieve this by using CSS Attribute Selector:

[class="frme_150+1"] { background-position:150px 1px; }

Working Demo.

Why an expression with operator AND doesn't work in css selector

This

span[id='nav-cart-count'].nav-cart-count

expression means literally, that we are locating span element with id attribute value equals to nav-cart-count and it has class nav-cart-count.

The second expression

span[id='nav-cart-count'][class='nav-cart-count']

means span element with id attribute value equals to nav-cart-count and class attribute value equals to nav-cart-count.

So, in case this span element has class attribute value like following: nav-cart-count counter the first locator expression will match it while the second will not!

To match both cases you can use the first expression

span[id='nav-cart-count'].nav-cart-count

or the second expression can be modified to search for contains instead of equals, like this:

span[id='nav-cart-count'][class*='nav-cart-count']

What Does the "+" (Plus Sign) CSS Selector Mean