1

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

Andre Chenier
  • 1,166
  • 2
  • 18
  • 37

2 Answers2

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/.

dfsq
  • 191,768
  • 25
  • 236
  • 258
  • 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
0

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

anurupr
  • 2,294
  • 2
  • 20
  • 28