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

Добрый день.

Я сейчас прохожу курс  повышения квалификации  - "Профессиональное веб-программирование". Мне нужно получить диплом по этому курсу. Я так полагаю нужно его оплатить чтобы получить диплом о повышении квалификации. Как мне оплатить этот курс?

 

Галина Башкирова
Галина Башкирова

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

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