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

CSS3. Селекторы

< Лекция 9 || Лекция 10: 123 || Лекция 11 >
Аннотация: Селекторы элементов (type selectors). Селекторы класса (class selectors). Селекторы идентификаторов (ID selectors). Селекторы потомков (Descendant selectors). Селекторы дочерних элементов (Child selectors). Универсальные селекторы (Universal selectors). Селекторы братских элементов (Adjacent sibling selectors). Селекторы атрибутов (Attribute selectors). Селекторы псевдоклассов (Pseudo-classes). Селекторы псевдоэлементов (Pseudo-elements).

В самом начале лекций, посвященных теме каскадных таблиц стилей, была приведена таблица различных селекторов, указанных в ней видов достаточно для большинства операций. Тем не менее, спецификация 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>
< Лекция 9 || Лекция 10: 123 || Лекция 11 >
Сергей Крупко
Сергей Крупко
Как оплатить курс?
Галина Башкирова
Галина Башкирова
Темы Вкр для проф. переподготовки Профессиональное веб-программирование
Марина Дайнеко
Марина Дайнеко
Россия, Moscow, Nope, 2008
Анатолий Федоров
Анатолий Федоров
Россия, Москва, Московский государственный университет им. М. В. Ломоносова, 1989