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

Navigation
30

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

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
FragmentTransacion with Fragment Activity CNAME note