CSS3. Селекторы

Селекторы идентификаторов

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

Пример оформления селектора идентификаторов: #clrRed {color: red}.

Как и селекторы классов, селектор идентификатор может быть объединен с селектором элементов: li#clrRed {color: red}.

Селекторы потомков

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

Оформляется селектор потомков следующим образом:

элемент-предок элемент-потомок { атрибуты стиля }

Следующий пример задаст стиль только для элементов <p>, являющихся потомком элемента <table>:

table p {color: red}

В следующем ниже коде контент, к которому будет применен указанный стиль, выделен красным:

    <div>
      <ul>
        <li>some text<p>some 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>

Селекторы потомков можно объединить с селекторами классов:

table.clr p {color: red}
или
table p.clr {color: red}

Равно как и с селекторами идентификаторов:

table#red p {color: red}

или

table p#clr {color: red}

Разумеется, можно организовывать и более "хитрые" комбинации:

table#red td.txt p.clr {color: red}

Селекторы дочерних элементов

Стили, описанные при помощи данных селектора применимы только к дочерним элементам.

Оформляется стиль с селектором дочерних элементов следующим образом:

элемент-родитель > дочерний элемент {атрибуты стиля}

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

table#red td.txt > p.clr {color: red}

В этом случае стиль будет применен к содержимому элемента <p>, относящегося к классу clr, и являющемуся дочерним элементом по отношению к тегу <td>, который, в свою очередь должен относиться к классу txt. При этом указанный тег <td> должен быть потомком <table> с идентификатором red.

Справедливости ради, стоит отметить, что подобные сложные комбинации селекторов, как правило, не используются.

Универсальные селекторы

Стили с универсальными селекторами применяются ко всем элементам веб - страницы. Оформление при этом выглядит следующим образом:

* {color: red}