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/
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?
You are looking for the direct child combinator,