Is the > symbol necessary when selecting a child element in CSS?

Question

div > p {
    background-color: yellow;
}

doesn't appear to evaluate any differently than

div p {
    background-color: yellow;
}

But would there be an effect I am unaware of? It seems that using the > is more proper style, at least.

`>` is used for an immediate descendent. – wf4 Oct 10 '14 at 08:30 — wf4, Oct 10 '14 at 08:30

score 7 · Accepted Answer · answered Oct 10 '14 at 08:30

7

There is a difference; > is "immediately follows". So your div > p would apply to the p here:

<div>
    <p>Text here</p>
</div>

but not here:

<div>
    <table>
        <tr>
            <td>
                <p>Text here</p>
            </td>
        </tr>
    </table>
</div>

A more detailed description can be found within the CSS specification for child selectors.

answered Oct 10 '14 at 08:30

Adrian Wragg

7,311
3
26
50

What would be the difference then between the two former and `div * p` ? – Jason Nikesh Oct 10 '14 at 08:56
@JasonNikesh `div * p` means a p element that's a descendant of a div element but not a direct child. – Alohci Oct 10 '14 at 09:02
@Alohci More simply, it means it's a descendant *of a descendant* of a div element. – Adrian Wragg Oct 10 '14 at 09:04
@JasonNikesh See http://www.w3.org/TR/CSS2/selector.html#descendant-selectors for details on descendant selectors. – Adrian Wragg Oct 10 '14 at 09:05
@AdrianWragg - Yes, if you prefer. I was trying to make it clearer what the use case for such a construct might be. – Alohci Oct 10 '14 at 09:10
@AdrianWragg So for my clarity, `div > p` is only direct children, `div p` includes direct children and all descendants, and `div * p` excludes direct children, but includes further descendants? – Jason Nikesh Oct 10 '14 at 20:41
@JasonNikesh Those are all correct, yes, although you might want to read up on the exact usage of "*" - it just means "match any tag", it doesn't have any special usage specific to descendancy. – Adrian Wragg Oct 10 '14 at 20:48

score 1 · Answer 2 · answered Oct 10 '14 at 08:38

Look at this example it might help you ...

div#container > ul {

border: 1px solid black; }

.......

<div id="container">   <ul>
  <li> List Item
    <ul>
       <li> Child </li>
    </ul>
  </li>
  <li> List Item </li>
  <li> List Item </li>
  <li> List Item </li>   </ul> </div>

A selector of #container > ul will only target the uls which are direct children of the div with an id of container. It will not target, for instance, the ul that is a child of the first li.

For this reason, there are performance benefits in using the child combinator. In fact, it's recommended particularly when working with JavaScript-based CSS selector engines. ....... Read this : http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048 it will help you .

score 1 · Answer 3 · answered Oct 10 '14 at 08:44

1

div > p selects the direct child p (only the sons),
div p selects all its children p, now matter how deep it is in the hierarchy (including the grandsons and great grandsons).

answered Oct 10 '14 at 08:44

qtgye

3,580
2
15
30

score 1 · Answer 4 · answered Oct 10 '14 at 08:46

1

div>p

indicates a P which is a DIRECT child of div

div p

indicates a p that is descendent of div, not

Check Fiddle for example.

answered Oct 10 '14 at 08:46

Luca De Nardi

2,280
16
35

score 1 · Answer 5 · answered Oct 10 '14 at 09:08

1

The > selector is used to select child elements of a particular elemnent.

answered Oct 10 '14 at 09:08

Rohan

13,308
21
81
154

Is the > symbol necessary when selecting a child element in CSS?

5 Answers5