Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 17345 / 1605 | Оценка: 3.91 / 4.09 | Длительность: 12:32:00
Лекция 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 >
Эмиль Галеев
Эмиль Галеев

По каким то причинам не сохраняется текст. И не выдает сообщение об ошибке если текста нет. Проверил все внимательно проблем в написании нет. Вопрос почему он не сохраняет?

Алексей Вычегжанин
Алексей Вычегжанин

http://www.intuit.ru/studies/courses/3734/976/lecture/27486?page=3

Заполнил html, js и css-файлы согласно рекомендациям. После запуска главной страницы в панели разработчика браузера, во вкл. Console, выдает сообщение об ошибке:

"script.js:85 Uncaught TypeError: Cannot read property 'addEventListener' of null"

, ссылаясь на строку js-файла (функция load()):

" audio.addEventListener('ended', function () "

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

Функция добавления записей в плейлист не работает. Соответственно сам плей-лист и полоса прокрутки не открываются.

Антон Войлоков
Антон Войлоков
Россия, Алтайский край
Анна Жирнова
Анна Жирнова
Украина, Киев