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>