What is the difference between the "element element" and "elementelement" selectors?


I was looking at the Twitter Bootstrap code, and I found this css:

.table-condensed>tfoot>tr>td {
/* ... */

In the operating sense, what would be the difference between just putting a space between the elements, and putting > ?

asked by anonymous 20.01.2014 / 23:49

1 answer


element element {...

The space between two css elements is the descendant selector .
Descending is any element that is declared within another.

element > element {...

The > between two elements of the css is the child selector . Son is also a descendant, but is the "direct descendant" specifically. That is, it is directly inserted in the previous element.

In practice:

When you type div span { ... } , you are saying any span descending (inside) div, and span acting in the two cases below:

<div><span> bla bla </span></div>
<div><a><span> bla bla </span></a></div>

Now, when using div > span { ... } , it will only affect children of the div, like this:

<div><span> bla bla </span></div>

attributes will not be applied on other descent levels, as in this case:

<div><a><span> bla bla </span></a></div>

Reason: <span> in the latter case is "net" of <div> , ie it is descendant but not child, since child is <a> .

See the example in JS Fiddle .


20.01.2014 / 23:56