CODEWITHSUNDEEP
htmlcss
CoderMusgrove
CoderMusgrove

Reputation: 614

CSS: Simply apply a style to the first generation of children

I am trying to apply a css style to the first children of an element. So say I have a div, with two divs, which are the children, and within each child is their own child, which are the grandchildren.

This JSFiddle, I hope is what I've done: http://jsfiddle.net/o8xhba9u/

#parent {
    border: 1px solid;
    padding: 10px;
}
#child-one {
    text-indent: 5px;
    padding: 10px;
}

#child-two {
    text-indent: 5px;
    padding: 10px;
}

#parent * {
    border-top: 1px solid red;
}

My goal is to only have the children (child-one and child-two) to only be the ones with the red border-top. The paragraph elements (grandchildren) shouldn't have the red outline. I am trying to accomplish this dynamically, as if I were to have different elements, and add new ones later and have the effect applied without having to edit the css. How can I accomplish that?

Upvotes: 1

Views: 356

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240878

You are looking for the direct child combinator, >.

Example Here

#parent > * {
    border-top: 1px solid red;
}

Upvotes: 5

Related Questions