Sa invatam CSS: x > Y

De mult timp nu am scris un articol despre sa invatam CSS. Azi m-am gandit ca ar fi bine sa invatam un atribut poate mai putin folosit in CSS.  Este vorba despre atributul X > Y.

[css]
#container > ul {
border: 1px solid black;
}
[/css]

Ce va face selectorul de sus? Practic va selecta toate ul-urile care sunt directe in elementul #container. Ce inseamna asta? Sa presupunem ca avem un div in elementul container si in acel div un ul. In acest caz ul-ul din acel div nu va fi suspus regulii de CSS de mai sus deoarece ul-ul nu e direct in elementul #container ci este in #container div.

Este important sa nu confundam cu regula de css X Y. Aceasta la randul lui va selecta si ul-ul din al doilea div.

Spune si tu parerea...