CSS sibling selector on class names?

Question

<div class="parent">
  <div class="firstChild"></div>
  <div class="secondChild"></div>
  <div class="thirdChild"></div>
  <div class="fourthChild"></div>
<div>

I am trying to style fourthChildbased on if secondChild exists under parent

I thought the below would work but Chrome says no. I dont want to use nth child because the DOM could change based on our program, the below seems very flexible but I'm doing something wrong.

.parent .secondchild ~ .fourthchild
{
     css stuff
}

turns out the magic selector was .parent div.secondChild ~ div.fourthChild" — user2733367, Aug 30 '13 at 14:55

score 9 · Answer 1 · answered Aug 30 '13 at 14:53

9

It's the correct solution, you just wrongly named your classes in the CSS, you forgot the caps.

.parent .secondChild ~ .fourthChild

http://jsfiddle.net/LeBen/Y6QDr/

answered Aug 30 '13 at 14:53

LeBen

1,884
12
21

I agree LeBen, I do the same for HTML and CSS. – Michael Aug 30 '13 at 15:36

score 3 · Answer 2 · answered Aug 30 '13 at 14:55

3

It's case sensitive! Do this:

.parent .secondChild ~ .fourthChild

answered Aug 30 '13 at 14:55

Alberto

1,853
1
18
22

ups... late! :) @LeBen – Alberto Aug 30 '13 at 14:56

CSS sibling selector on class names?

2 Answers2