CSS уроки, 2 часть: CSS родительские элементы, дочерние, псевдоклассы

Родительские и дочерние элементы, псевдоклассы

В предыдущем уроке мы рассмотрели, как с помощью классов (class) и идентификаторов (id) можно ограничивать область действия команды стиля. Теперь посмотрим, какие существуют другие методы для точного управления командами стиля.

Родительские и дочерние элементы

Часто, элементы одной HTML-страницы могут быть включены в другие элементы. Например, в следующем абзаце гиперссылка <a> включена в элемент <em> и в абзац <p>:

<p>Посетите следующую <em>интересную <a>страницу!</a></em></p>

Внутренний элемент называется дочерним, а внешний – родительским. В этом случае, <p> является родительским элементов <em> и <a>, а <em> является родительским элементом <a>. Соответственно, <em> является дочерним элементом <p>, а <a> является дочерним элементом <em> и <p>.

Отношения родительский-дочерний особенно полезны для определения области действия команд CSS. Например, с помощью следующей команды вы можете удалить гиперссылки в абзаце с классом menu (некоторые веб-дизайнеры предпочитают этот стиль главному меню):

p.menu a {text-decoration: none}

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

Обратите внимание, как сначала указывается имя родительского элемента (возможно, с именем класса или идентификатора), а затем имя дочернего элемента, оставляя пробел.

CSS позволяет использовать другой тип отношения элемента: parent-child. Разница заключается в том, что дочерним элементом может быть только тот элемент, который непосредственно связан с родителем. Например:

<p> Посетите следующую <em> интересную <a> страницу! </a> </ em> </ p>,

<em> является дочерним элементом <p>, а <a> является дочерним элементом <em>, но <a> не является дочерним элементом <p>.

Стиль для детей можно указать следующим образом:

em> a {text-decoration: none}

Эта команда удалит подчеркивание всех дочерних гиперссылок элемента <em>.

Псевдоклассы

Используя так называемые псевдоклассы, вы можете создавать специальные эффекты для некоторых селекторов. Псевдоклассы обычно назначаются следующим образом:

selector:псевдокласс {свойство:значение}

Давайте посмотрим на некоторые конкретные примеры.

Псевдокласс link

С помощью псевдокласса link вы можете изменить стиль гиперссылок (которые обычно синего цвета и подчеркнуты):

a:link {color:#00FFFF; text-decoration:none}

Псевдокласс visited

Псевдокласс visited определяет стиль для уже посещенных гиперссылок:

a:visited {color: #FFFF00}

Псевдокласс hover

Псевдокласс hover используется для указания стиля элемента, на котором расположен указатель мыши. Чаще всего они используются гиперссылками:

a: hover {color: red}

Эта команда CSS превратит любую гиперссылку в красную, когда на нее наведен указатель мыши.

Псевдокласс hover может использоваться и для других элементов. Например, раскрывающиеся меню и их производных. Когда указано главное меню, стиль наведения активируется, и в результате отображается подменю. Более ранние версии Internet Explorer поддерживают псевдокласс hover только для гиперссылок, но существуют способы обойти эти ограничения.

Псевдокласс active

Псевдокласс active устанавливает стиль для элементов, по которым щелкают в данный момент. Активный псевдокласс часто используется с гиперссылками:

a: active {color: # AAAA00}

Если вы используете комбинацию псевдоклассов гиперссылок, при их объявлении вы должны вы должны соблюдать порядок link – visited – hover – active. В противном случае, стиль не будет выполнен.

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

Псевдокласс first-child используется для указания первого дочернего стиля элемента. Например, вы можете создать первый абзац любой страницы курсивным шрифтом, применив псевдокласс first-child к абзацам:

p: first-child {font-style: italic}

Вот немного более сложный пример выделения первой гиперссылки в каждом абзаце:

p> a: first-child {color: green}

Псевдокласс focus

Псевдокласс focus позволяет вам применять стиль к вводу с клавиатуры. Стиль становится активным, когда элемент находится в фокусе. Один общий пример – установить цвет фона (например, розовый) или рамку для поля ввода:

input: focus {background-color: pink}

Читайте далее: CSS уроки, 3 часть: CSS шрифт, текст, списки