2 апреля 2010

Псевдоклассы. Часть 2.

wordpress для чайниковВ статье Псевдоклассы. Часть 1 мы рассмотрели наиболее используемые псевдоклассы. А сейчас рассмотрим два псевдокласса, которые используются реже, но знать их нужно :First-child и :Lang

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

Особеность этого псевдокласса в том, что с его помощью выбирается элемент только тогда, когда он является первым потомком родительского элемента:

p:first-child {
color: red;
}

Это правило можно прочесть так: Вывести красным цветом текст каждого параграфа, который является первым потомком.
Здесь нужно быть внимательным поскольку есть вероятность прочесть неправильно по аналогии с Псевдоклассы. Часть 1 : Выбрать первого потомка тега <p> и выделить его красным. Я специально перечеркнул правило, чтобы вы видили, что оно не является верным.

Пример использования псевдокласса :First-child

<div>
<p>Это параграф который отобразится красным</p>
</div>
<div id="myid">
<h2>Заголовок</h2>
<p>Этот параграф не отобразится красным</p>
</div>

В этом примере первый параграф отобразится красным цветом поскольку он является первым потомком тега  <div>. А второй параграф не отобразится красным, поскольку первым потомком тега <div> является тег <h2>.
Еще пример с псевдо-классом :first-child

<div>
   <p><b>Этот кусок красный</b> наберем следующий <b>здесь не будет красным</b>
   идем дальше <b>и это не красным</b></p>
   <p><b>А вот здесь красным</b>, но дальше строка не будет красным, идем дальше <b>здесь тоже
      черным</b> цветом до конца параграфа</p>
</div>

Давайте разберем этот пример. В первом параграфе отобразится красным только текст заключенный в первые теги <b>  </b> , остальные будут черного цвета. А во втором параграфе правило начнет действовать снова, поэтому текст заключенный между первым тегами <b> </b> снова будет красным.

Псевдокласс :Lang

Этот псевдокласс является наимение используемым. Он применяется для выбора всех элементов написанных определенным языком. Как определяется язык? Анализом документа и поиском аттрибута lang.
Для примера напишем код с аттрибутом lang

<blockquote lang="en">
<pre>
God! Save our soul!
</pre>
</blockquote>

И в таблице стилей пропишем правило:

blockquote:lang(en) {
font-style:italic;
}

Которое можно прочесть так: Выделить наклонным шрифтом все цитаты на английском языке.

Статьи по теме
Статья оказалась полезной? Подпишись на RSS рассылку или следуй за мной на твиттере @wpstarter или по этой ссылке wpstarter

Оставьте комментарий

Обведите фигуру по линии:

Ставим WordPress на локальном копьютере