CSS3. Селекторы

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

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

Пример

Стиль: 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-".

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

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

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

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

• active – стиль применяется к элементу, активированному пользователем;
• link – стиль применяется к непосещенным ссылкам;
• focus – стиль применяется к элементу при получении им фокуса;
• hover – стиль активизируется, когда курсор находится в пределах элемента;
• visited – стиль применяется к посещенным гиперссылкам;
• first-child – стиль применяется к первому дочернему элементу селектора.

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

a:link {color: red}

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

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

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

• after – позволяет добавить контент после указанного элемента;
• before – позволяет добавить контент до указанного элемента;
• first-letter – задает стиль для первого символа в тексте элемента;
• first-line – задает стиль первой строки текста элемента.

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

li: before {content: "some content"}

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

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

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

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

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

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

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

1. http://www.w3.org/TR/CSS2/selector.html#type-selectors
2. http://www.w3.org/TR/selectors/
3. http://www.alfafreedesign.ru/selektor-css.html
4. http://vgi.volsu.ru:8000/~Vladimir.Dronov/books/html5_css3_web2.0_2.html