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
}

Kirtle

turns out the magic selector was .parent div.secondChild ~ div.fourthChild" – Kirtle

Answer 1

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/

Kiley

I agree LeBen, I do the same for HTML and CSS. – Gravestone

Answer 2

It's case sensitive! Do this:

.parent .secondChild ~ .fourthChild

Deafmute

ups... late! :) @Kiley – Deafmute