Selecting more that one class in css 3

Question

Today I was looking at some sample code I found and noticed that the developer used a "+" instead of a "," to select two classes.

.region + .region{
    border-left: 1px solid lightgray;
    padding-left: 3.5%;
    margin-left: 4%;
}

What does the "+" sign do that the "," doesn't? Why would you use it? curiously the same class was selected twice here. Why?

Here is a link to the code pen... http://codepen.io/adobe/pen/vKixh

Im just learning CSS3 and any help would be appreciated. Thanks

http://stackoverflow.com/questions/1139763/what-does-the-plus-sign-css-selector-mean — Jonas Grumann, Mar 13 '14 at 14:41

SW4 · Answer 1 · 2014-03-13T17:05:15.230

6

They are NOT the same!

+ is the adjacency selector, e.g. selects .region elements following .region elements.

A comma separated list simply allows you to apply one block of styling to multiple classes, thus:

.region, .region{}

Wouldn't actually perform any action that just .region{} wouldnt by itself.

Adjacency selector (MDN article)

(+) This is referred to as an adjacent selector. It will select only the specified element that immediately follows the former specified element.

This in mind, .region + .region{} would only apply the styling to a .region after another one, and NOT one in isolation, or the first.

edited Mar 13 '14 at 17:05

answered Mar 13 '14 at 14:41

SW4

69,876
20
132
137

1

I think we need to stress they're **not the same**! hah – Ian Clark Mar 13 '14 at 14:42
1

@IanClark - done, just for you! – SW4 Mar 13 '14 at 14:42
1

.region + .region{} refers to all regions which have a region just before itself. In a list of regions, this will apply to all but the first one – Johan Mar 13 '14 at 14:51
@Johan - I realise this wasnt clear so have clarified the last part, thanks – SW4 Mar 13 '14 at 14:56
Just what I needed to know. Thanks for the help! – Nate Gines Mar 13 '14 at 15:59

score 1 · Accepted Answer · answered Mar 13 '14 at 14:53

+s and ~s Are Siblings

<div>
    <div class="c"></div>
    <div class="x"></div>
    <div class="y"></div>
</div>

using .c + div {} will style "x" CSS ONLY WORKS DOWNWARDS!

,s Are Multiple Classes

<div>
    <div class="c"></div>
    <div class="x"></div>
</div>

using .c, .x {} will style both "c" and "x" the same way.

No Space Means More Conditions

<div>
    <div class="c x"></div>
    <div class="c"></div>
    <div class="x"></div>
</div>

using .c.x {} will style "c x"

Fabrizio Calderan · Answer 3 · 2014-03-13T14:53:23.153

This is not an alternative notation to , (comma): the + has a totally different meaning, because it is the immediate sibling selector (or adjacent selector), so your rule matches a .region element only when it's adjacent to another previous .region element.

If you have several sibling .region elements, like this

<div class="region">...</div>
<div class="region">...</div>
<div class="region">...</div>
<div class="region">...</div>

.region + .region will match every .region element except the first one.

Since this a CSS2 selector, an equivalent CSS3 selector would be .region:nth-child(n+1)

Selecting more that one class in css 3

3 Answers3

+s and ~s Are Siblings

,s Are Multiple Classes

No Space Means More Conditions