CODEWITHSUNDEEP
css
user3607282
user3607282

Reputation: 2555

Select top level children using CSS

Is it possible to select all top level children regardless of their type using CSS.

<div class="parent"> <div class="top-level-1">
 <!-- CONTENT -->
</div>
<div class="top-level-2">
 <!-- CONTENT -->
</div>
<a class="top-level-3">
 <!-- CONTENT -->
</a> </div>

When I use,

.parent * {}

it selects the child elements but also elements within that child.

What I want to do is,

  1. Select ONLY the top level child elements (in the sample code above - div.top-level-1, div.top-level-2 and a.top-level-3)

  2. Classes will not be the same therefore a solution where classes are not used is preferred.

Here is the JSFiddle for better understanding: http://jsfiddle.net/Q4BBd/

Upvotes: 7

Views: 13856

Answers (4)

Ishan Jain
Ishan Jain

Reputation: 8171

I think this would help you:

a) Select all divs:

div{color:black;}

b) Find any divs that are inside of .parent divs (OR direct child of the .parent)

.parent > * {
    color:red;
}

Working Example

Upvotes: 0

Tushar
Tushar

Reputation: 4418

you can use this.

.parent > div {
   /*CSS goes here*/
}

Upvotes: 0

Sid
Sid

Reputation: 801

div.parent > *:first-child {color:red}

This Will work for you

Js fiddle:Fiddle

Upvotes: 0

George
George

Reputation: 36794

Use the > combinator to select only immediate children (of any type) of a top-level <div>:

body > div > * {}

JSFiddle

Upvotes: 20

Related Questions