CSS3. Селекторы

В самом начале лекций, посвященных теме каскадных таблиц стилей, была приведена таблица различных селекторов, указанных в ней видов достаточно для большинства операций. Тем не менее, спецификация W3C описывает большее количество типов селекторов, рассмотрению которых и будет посвящена данная лекция.

Селекторы элементов

Наиболее простой для понимания вид селекторов, при его использовании стиль будет применен ко всем встречающимся в html - документе соответствующим элементам.

Пример

Стиль: p {color: red}

В следующем ниже коде контент, к которому будет применен указанный стиль, выделен красным:

<div>
   <ul>
    <li>some text <p>red text</p></li>
    <li>some text part 2</li>
    <li>some text part 3</li>
   </ul>
  </div>
  
  <div>
   <table>
    <tr>
     <td> table 1.1</td>
     <td>table 1.2.1 <p>red text</p></td>
    </tr>
    <tr>
     <td>table 2.1</td>
     <td>table 2.2</td>
    </tr>
   </table>
  </div>

Селекторы класса

В отличие от селекторов элементов, стили описанные при помощи селектора классов будут применены только к элементам, содержащим атрибут class с соответствующим значением.

Пример

Стиль: .clrRed {color: red}

В следующем ниже коде контент, к которому будет применен указанный стиль, выделен красным:

<div>
      <ul>
        <li>some text<p>some text</p></li>
        <li class="clrRed">some text part 2</li>
        <li>some text part 3</li>
      </ul>
    </div>
    
    <div>
      <table>
        <tr>
          <td> table 1.1</td>
          <td>table 1.2.1 <p class="clrRed">some text</p></td>
        </tr>
        <tr class="clrRed">
          <td>table 2.1</td>
          <td>table 2.2</td>
        </tr>
      </table>
    </div>

Селекторы элементов и классов могут быть объединены:

p.clrRed {color: red}
li.clrRed {color: red}

Таким образом, содержимое тегов <li>, относящихся к классу clrRed, будет представлено в красном цвете, содержимого тега <p> аналогичного класса – красным.

Также к элементу могут быть применены стили нескольких классов, например:

.txtAlign {text-align: justify}
.txtColor {color: red}
<p class="txtAlign txtColor"> ..... </p>

Селекторы идентификаторов

Стиль, описанный при помощи селекторов идентификаторов, может быть применен только к одному элементу веб - страницы. При этом элемент должен содержать атрибут id с соответствующим значением.

Пример оформления селектора идентификаторов: #clrRed {color: red}.

Как и селекторы классов, селектор идентификатор может быть объединен с селектором элементов: li#clrRed {color: red}.

Селекторы потомков

Селектор потомков используется для задания стиля элементов, являющихся потомками другого элемента.

Оформляется селектор потомков следующим образом:

элемент-предок элемент-потомок { атрибуты стиля }

Следующий пример задаст стиль только для элементов <p>, являющихся потомком элемента <table>:

table p {color: red}

В следующем ниже коде контент, к которому будет применен указанный стиль, выделен красным:

    <div>
      <ul>
        <li>some text<p>some text</p></li>
        <li >some text part 2</li>
        <li>some text part 3</li>
      </ul>
    </div>
    
    <div>
      <table>
        <tr>
          <td> table 1.1</td>
          <td>table 1.2.1 <p>some text</p></td>
        </tr>
        <tr>
          <td>table 2.1</td>
          <td>table 2.2</td>
        </tr>
      </table>
    </div>

Селекторы потомков можно объединить с селекторами классов:

table.clr p {color: red}
или
table p.clr {color: red}

Равно как и с селекторами идентификаторов:

table#red p {color: red}

или

table p#clr {color: red}

Разумеется, можно организовывать и более "хитрые" комбинации:

table#red td.txt p.clr {color: red}

Селекторы дочерних элементов

Стили, описанные при помощи данных селектора применимы только к дочерним элементам.

Оформляется стиль с селектором дочерних элементов следующим образом:

элемент-родитель > дочерний элемент {атрибуты стиля}

Как и в предыдущих случаях, допустимо комбинировать различные селекторы:

table#red td.txt > p.clr {color: red}

В этом случае стиль будет применен к содержимому элемента <p>, относящегося к классу clr, и являющемуся дочерним элементом по отношению к тегу <td>, который, в свою очередь должен относиться к классу txt. При этом указанный тег <td> должен быть потомком <table> с идентификатором red.

Справедливости ради, стоит отметить, что подобные сложные комбинации селекторов, как правило, не используются.

Универсальные селекторы

Стили с универсальными селекторами применяются ко всем элементам веб - страницы. Оформление при этом выглядит следующим образом:

* {color: red}

Селекторы братских элементов

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

Пример

Стиль: strong + p {color: red}

В следующем ниже коде контент, к которому будет применен указанный стиль, выделен красным:

    <div>
      <ul>
        <li><strong>some text</strong> <p>some text</p> more text <p> and more text</p></li>
        <li >some text part 2</li>
        <li>some text part 3</li>
      </ul>
    </div>
    
    <div>
      <table>
        <tr>
          <td > table 1.1</td>
          <td>table 1.2.1 <p>some text</p></td>
        </tr>
        <tr>
          <td>table 2.1</td>
          <td>table 2.2</td>
        </tr>
      </table>
    </div>

Также допускается комбинирование с другими типами селекторов.

Селекторы атрибутов

Селекторы атрибутов, как понятно из их названия, привязываются к элементу, имеющему соответствующий атрибут.

Оформляются данные селекторы следующим образом:

элемент [атрибут=значение атрибута] {атрибут стиля }

Рассмотрим на примере. Следующий стиль a[href="doc.htm"] будет применен только к содержимому тега <a>, значение атрибута href которого соответствует doc.htm.

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

img[title] {border: 1px double black}

Также можно задать стиль для элементов, значения атрибутов которых содержат определенное слово:

img[alt~="word"] {border: 1px double black}

В этом случае стиль будет применен к любому тегу <img>, атрибут alt которого содержит слово word.

Помимо вышесказанного, можно задать селектор по атрибуту содержащего разделенное дефисом значение:

img[title|="word"] {border: 1px double black}

Стиль будет применен к любому тегу <img>, значение title которого содержит "word-".

Селекторы псевдоклассов

Псевдоклассы позволяют применять различные стили к элементам, в зависимости от их состояния.

К примеру, к ссылке могут быть применены различные стили в зависимости от того, является ли ссылка еще не посещенной, находится ли в "фокусе" курсора.

Доступны следующие "состояния" элементов:

Пример оформления стилей псевдоклассов:

a:link {color: red}

Селекторы псевдоэлементов

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

Доступны следующие псевдоэлементы:

Пример оформления:

li: before {content: "some content"}

Ключевые термины и определения

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

Псевдоэлементы – это условные фиктивные элементы, которые являются частью существующих элементов или вводятся в документ дополнительно.

Краткие итоги

Данной лекцией мы заканчиваем знакомство с каскадными таблицами стилей. Нами были рассмотрены все базовые приемы работы со стилями.

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

Список материалов для самостоятельного изучения