summing notation in CSS between CSS classes (.class1 + .class2)

Question

I think I couldn't find the purposive searching term(s) for web so I needed to ask here.

Sometimes I see CSS statements like this:

.class1 {...}

.class2 {...}

.class1 + .class2 {...}

Q1) What does CSS understands if there are 3 CSS statements like above?

Q2) I tried to find clue on http://jsbin.com/detuxema/1/edit but it didn't help. May you please provide a mini-example

used to this http://jsbin.com/detuxema/4/edit – Rohit Azad Malik Mar 03 '14 at 07:39 — Rohit Azad Malik, Mar 03 '14 at 07:39

score 3 · Answer 1 · answered Mar 03 '14 at 07:44

3

Rule

.class1 + .class2 {
    color: blue;
    border: 1px solid orange;
}

takes effect on .class2 only is previous sibling is .class1. Take a look at this comprehensive demonstration of all three situations http://jsfiddle.net/PzGb9/.

answered Mar 03 '14 at 07:44

dfsq

187,712
24
229
250

1

+1 for `sibling` term. by the help of your answer, I learnt that complete term was `Adjacent sibling selectors`. [http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors] – Andre Chenier Mar 03 '14 at 07:51
Glad my answer helped you! – dfsq Mar 03 '14 at 07:56

score 0 · Accepted Answer · answered Mar 03 '14 at 07:38

Check this out http://jsbin.com/detuxema/2/edit

In this example,

you have a <p> element with class class1 and class class2 and another <p> element with class class2.

for the first <p> element the first 2 rules will be applied because it has both classes in the class attribute

the 3rd rule will be applied to only the 2nd <p> element because that rule is only applied to immediate sibling

Here's some more info about sibling selectors

http://css-tricks.com/child-and-sibling-selectors

summing notation in CSS between CSS classes (.class1 + .class2)

2 Answers2