CODEWITHSUNDEEP
cssclasshtml
Anthony Miller
Anthony Miller

Reputation: 15909

Target same-level child of an element

Is there an easy way to target all 3rd layer elements?

For example, my right column layout is as follows:

<div class=right_column>
 <div class=module>
  <div>
   <p></p>
  </div>
 </div>

 <div class=different_module>
  <div>
   <p></p>
  </div>
 </div>
</div>

How do I target both non-classed <div> elements in this instance without specifying each one individually?

Upvotes: 0

Views: 1105

Answers (3)

Chowlett
Chowlett

Reputation: 46667

Like this: .right_column > div > div

> is the "Child Selector" - check out this top-notch article on CSS Tricks.

Upvotes: 2

Jason Gennaro
Jason Gennaro

Reputation: 34855

You should be able to do something like this

div > div > div{
    /*  styles here */
}

> is a child-selector.

Here it says select and use the div that is a child of a div that is a child of a div.

Here is an example: http://jsfiddle.net/hbXsE/1/

Note: the HTML you provided has a few missing div tags and some closing span tags. I redid it for the example.

Upvotes: 1

hair raisin
hair raisin

Reputation: 2628

You could use the selector div.right_column div div but it will also match divs nested more deeply. To avoid this on most newer browsers, you could use the child selector, like this: div.right_column > div > div but it won't work in older versions of IE

Upvotes: 1

Related Questions