Is symbol> necessary when selecting a child element in CSS?
There is a difference; >
"immediately follows". So yours div > p
will apply to 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 in the CSS specification for child selectors .
source to share
Take a 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>
The #container> ul selector will only target uls that are direct children of the container id div. It will not target, for example, a ul that is a descendant of the first li.
For this reason, there are performance benefits when using a child combinator. In fact, it is recommended, especially when dealing with JavaScript oriented CSS selector mechanisms. ....... Read this: http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048 it will help you.
source to share