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?


solution

You are looking for the direct child combinator, >.

Example Here

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