Урок №5. Вложенные и сгруппированные селекторы, наследование

Для начала давайте разберемся, что такое родительский элемент и дочерний, например, имеем такую HTML структуру:

<div>
        <p>Всем счастья, <u>а вот это мы подчеркнем</u></p>
</div>

В этой структуре самым главным родительским элементом будет <div>, его дочерними элементами будут <p> и еще глубже <u>. Так же элемент <p> будет дочерним для <div>, но родительским для <u>, так как последний заключен в тэге <p>. Для тэга <u> родительскими будут и <div> и <p>, причем по приоритетам стилей сначала будет идти самый ближний по родству, т.е. <p> тэг.

Как правило наследуются не все свойства, например, могут наследоваться такие свойства, как цвета шрифта, размер шрифта и т.д. А не наследуются, например, ширина блока, отступы и т.д.

В примере описанном выше, если тэгу <div> размер шрифта задан 12px, а тэгу <p> - 14px, тогда тэг <u> будет наследовать размер в 14px, от ближнего родственника.

При написании селектора, которому мы хотим задать свойство наследование хорошо помагает, так как CSS его учитывает, просто нужно поочередно указывать тэги через пробел до нужного, при определении.

Допустим у нас есть HTML-структура:

<div>
    <p>
        У тебя все получится! =)
    </p>
</div>

Задать стиль для <p> можно следующим образом

p {color:#ff0000;}

или так

div p {color:#ff0000;} /* div p - вложенный селектор */

Оба этих варианта для данной структуры сделаю абсолютно одно и тоже - окрасят текст в красный цвет. Но вы заметили, что перед p, во втором случае появилось div. Это называется вложенные селекторы, они позволяют отделять стили друг от друга. Все в родительских и дочерних элементах. Вот эта запись:

div p {color:#ff0000;} /* div p - вложенный селектор */

Будет применять стиль ко всем <p> тэгам, у которых в родителях есть <div>. А тем, у которых такого родителя нету, стиль применятся не будет.

Отсюда вытекает еще одна особенность наследования. Допустим, у нас есть такая структура HTML:

<div>
        <span>Текст с неведомой, <span>Еще какой-то текст</span>,<u>информацией</u></span>
</div>

Тогда стиль

div span {color:#00FF00;}

Применится ко всем этим тэгам <span>, чтобы для внутреннего тэга <span> указать свой стиль нужно дописать такое:

div span {color:#00FF00;}
div span span {color:#FF0000;}

Вот как это будет выглядеть:

Т.е. тут четко прослеживается наследование и использование этого в CSS.

Еще одна занимательная особенность - сгруппированные селекторы. Допустим, мы хотим задать красный цвет всем <p> тэгам и всем <a> тэгам, тогда нам нужно написать так:

a {color:#ff0000;}
p {color:#ff0000;}

Благодаря возможности группировать селекторы этот код можно значительно упростить:

p, a {color:#ff0000;}

Результат не изменился, изменилась только структура CSS-кода. Сгруппированный селектор состоит из обычных селекторов, разделенных запятыми. В том числе под обычным селектором понимаются вложенные селекторы, тэги с классами и идентификаторами. Такая запись будет вполне допустимой:

div p.cred u, span#general a {color:#ff0000;}