Опубликован: 01.08.2012 | Уровень: для всех | Доступ: платный | ВУЗ: Томский политехнический университет
Лекция 10:

CSS3. Селекторы

< Лекция 9 || Лекция 10: 123 || Лекция 11 >

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

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

Пример

Стиль: 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
< Лекция 9 || Лекция 10: 123 || Лекция 11 >
Галина Башкирова
Галина Башкирова

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

Системный администратор информационно-коммуникационных» систем.
Мне нужно самой найти тему? или делать по высланным темам

 

Константин Моренко
Константин Моренко
Алексей Бегунов
Алексей Бегунов
Беларусь
Виктор Лабутин
Виктор Лабутин
Россия