CSS: дочерние, соседские селекторы и псевдо классы в IE7

Эти команды CSS наконец-то понимает Internet Explorer 7

Потомки

Допустим, у нас есть следующий HTML:

<div><p><span>Текст сообщения</span></p></div>

В этом примере <p> является "сыном" (прямым потомком) <div>, а <span> -- "внуком" <div>. Мы можем сделать текст элемента <span> красным, используя следующее правило CSS:

div span {color: red;}

Это означает, что содержимое любого элемента <span>, расположенного внутри элемента <div> будет красным. Этот <span> может быть прямым потомком ("сыном"), или непрямым потомком ("внуком", "правнуком" и т.д.) элемента <div>.

Если мы используем следующее правило CSS:

div>span {color: red;}

Текст внутри <span> не будет красным. Так как это правило озачает: <span>, являющийся прямым потомком <div>. А в нашем примере <span> является "внуком" <div>.

Соседи

Теперь IE7 понимает еще и "соседские" селекторы.

blockquote+p {margin-top: 0;}

Это CSS правило означает, что параграф, следующий сразу за цитатой, не имеет верхнего отступа.

Еще один хороший пример использования соседского селектора можно применить к горизонтальным спискам.

li+li {border-left: 1px solid black;}

Это правило означает, что каждый <li>(элемент списка), следующий за другим <li> (т.е. все, кроме первого) будет иметь левый бордюр.

Псевдо-класс First-child

Если вам нужно выделить первый элемент (первого потомка) родительского элемента, используйте псевдокласс first-child. Например, чтобы первый параграф внутри некой области с id="content" имел нулевой верхний отступ, используйте правило CSS:

#content p:first-child {margin-top: 0;}

Источник: New CSS commands for Internet Explorer 7