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 > ?
What is the difference between the "element element" and "elementelement" selectors?
30
asked by anonymous 20.01.2014 / 23:49
1 answer
45
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