Селекторы CSS путь к CSS4

Сейчас, когда мы все еще учимся использовать свойства CSS3, и теги HTML5, талантливые люди из команды W3C не сидят без дела и выпустили проект Селекторы CSS уровень 4 намекая на то, что CSS4 не за горами.

Оглавление:
  1. CSS3 уже устарело?
  2. Повторение — мать учения
  3. Псевдоклассы для ссылок
  4. Динамические псевдоклассы
  5. Комбинаторы CSS
  6. Псевдоклассы CSS3
  7. Псевдоклассы CSS4
  8. Атрибут i для селектора

Псевдоклассы CSS приобретают новый уровень. Различные новые способы применения селекторов в таблице стилей достигли 4-го уровня и скорее всего будут включены в CSS4.

CSS3 уже устарело?

Абсолютно нет! Нам еще предстоит многое сделать в CSS3, кроме этого CSS3 еще не полностью поддерживается даже самыми новыми версиями браузеров. CSS4 появился недавно и предназначен только для обсуждения в качестве незавершенного проекта.

По словам консо́рциума W3C о селекторах CSS4 понятно, что проект может быть обновлен или заменен на другое в любой момент. Так было с CSS3 и HTML5, теперь эти версии языков как рекомендуемый стандарт для веб-страниц.

к меню ↑

Повторение — мать учения

Список простых селекторов которые поддерживает даже IE6.

* селектор звёздочка применяется для сброса значений внутреннего и внешнего отступа padding и margin или им можно выделить дочерний элемент:

.class * { border: 1px solid; }

. селектор точка применяется для присвоения стиля классу:

.class { border: 1px solid; }

# селектор решетка применяется для присвоения стиля уникальному идентификатору:

#id { border: 1px solid; }

ul, ol селекторы для построения списка с дочерним элементом li, который так же является селектором:

ul, ol {list-style:none;} li{margin:0 0 0 20px;}
к меню ↑

Псевдоклассы для ссылок

Псевдокласс :link определит стиль для ссылок:

a:link { color: #669; }

Псевдокласс :visited определит стиль для посещенной ссылки:

a:visited { color: #245; }

Псевдокласс :active определит стиль нажатой ссылке:

a:active { color: red; }
к меню ↑

Динамические псевдоклассы

Псевдокласс :hover определит стиль для ссылок при наведении курсора:

a:hover { color: #6cc; }

в новых версиях браузеров псевдокласс :hover определяет стиль для всех элементов!

Псевдокласс :focus определит стиль к активному элементу на котором сфокусирован курсор:

a:focus { outline:thin dotted; }
к меню ↑

Комбинаторы CSS

+ селектор плюс применяется для комбинирования двух соседних селекторов, классов или того и другого.

div.class + p {color: red;} — текст внутри класса для первого параграфа будет красный.

> селектор знак больше применяется для разделения последовательности двух простых селекторов. Проще говоря определяет стиль для второго дочернего элемента.

ul.box > ul {color: #000;}

HTML

<ul class="box">
   <li>Список
     <ul>
       <li>Второй дочерний элемент</li>
     </ul>
   </li>
 <li>Список</li>
</ul>

~ селектор тильда предназначен для присвоения стиля всем дочерним элементам.

ul.box ~ ul {color: red;} — весь текст в списке будет красный.

к меню ↑

Псевдоклассы CSS3

В CSS3 было добавлено много структурированных псевдоклассов. Способы их практического применения смотрите на странице «Псевдоклассы CSS».

О селекторах и псевдолементах смотрите страницы с демонстрациями:

к меню ↑

Псевдоклассы CSS4

Напомню, что селекторы предназначены для привязки свойств стиля к элементам в документе не только для HTML но и для документа XML.

Список псевдоклассов 4-го уровня с минимальной поддержкой браузерами:

к меню ↑

Атрибут i для селектора

Селекторы CSS чувствительны к регистру. Атрибут для селектора i предназначен уточнить в каком регистре например ссылка, т.е если есть ссылка вида:

[href$=".png"] {
  color: red;
}

текст ссылки будет красный для верхнего и нижнего регистра .PNG, .png или .Png. С атрибутом i ссылки будут красного цвета только для указанного регистра в селекторе.

[href$=".png" i] {
  color: red;
}

атрибут i реагирует только на заглавный символ (первая буква).