Некоторые концепции для новичков: Как работают селекторы в CSS

2014-08-22

Вы новичок в CSS? Тогда эта статья для вас! Возможно самый важный ключ к пониманию работы CSS - осознание принципов работы селекторов CSS. Селекторы это то, что позволяет обращаться к определенным элементам HTML и применять к ним стили. Давайте отвлечемся от самих стилей, чтобы сфокусировать все наше внимание на выборе элементов.

В примере, приведенном ниже, CSS будет содержаться в файле с именем style.css ссылка на который будет содержаться в HTML - документе с именем index.html. Это - два разных файла. И это - одна из важных особенностей CSS, хранение дизайна отдельно от разметки.

Вот как выглядит HTML - файл:

Index.html:

<!DOCTYPE html>
 <html lang="en"> 
 <head>  
 <title> Мы изучаем селекторы!</title> 
  <link rel="stylesheet" href="style.css">
 </head>
  <body>      
<h1 id="yay">Yay</h1> 
 <body> 
</html>

А CSS - файл будет содержать лишь блок селекторов, который мы видим ниже.

ID selector
- Повышаем уровень
Селектор класса
- Повышаем уровень
Селектор тегов
- Повышаем уровень
Селектор атрибутов
- Повышаем уровень
Селекторы позиций
- Повышаем уровень
Псевдо-селекторы
- Повышаем уровень
- Повышаем уровень

ID selector

CSS:

#happy-cake {  }

HTML:

<!-- БУДЕТ работать -->
 <div id="happy-cake"></div>  
<!-- БУДЕТ работать --> 
<aside id="happy-cake"></aside>  
<!-- НЕ БУДЕТ работать --> 
<div id="sad-cake">НЕ ВЕРНЫЙ  ID!</div>
  <!-- НЕ БУДЕТ работать --> 
<div class="happy-cake">Это не является ID!</div>

Повышаем уровень

ID-селекторы наиболее весомый тип селекторов, если речь идет о CSS - спецификации. В теории они выбивают другие типы селекторов и стили. Звучит хорошо, но на практике не значит ничего хорошего, потому что хорошо, когда есть селекторы, которые при необходимости легко можно переопределить.

Селектор класса

CSS:

.module {  }

HTML:

<!-- БУДЕТ работать -->
 <div class="module"></div> 
 <!-- БУДЕТ работать --> 
<aside class="country module iceland"></aside> 
 <!-- НЕ БУДЕТ работать -->
 <div class=".module">Точка для CSS, не для HTML</div> 
 <!-- НЕ БУДЕТ работать--> 
<div class="bigmodule">Неверный класс</div>

Повышаем уровень

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

Отчасти потому, что вы можете добавить несколько классов (разделяемых пробелами) для HTML-элементов. Отчасти потому, что есть некоторые JavaScript-трики, с помощью которых вы можете манипулировать классами.

Селектор тегов

CSS:

h2 {  }

HTML:

<!-- БУДЕТ работать --> 
<h2>Привет, мама </h2>  
<main> 
  <div>      
<!-- Будет работать--> 
     <h2> Везде </h2> 
  </div>
 </main>  
<!-- НЕ будет работать--> 
<div class="h2">Неверный тег, не сработает </div>  
<!-- НЕ будет работать -->
 <h2class="yolo"> Убедитесь, что после тега есть пробел! </h2>

Повышаем уровень

Наибольшая польза от селекторов тегов ощущается при изменении свойств, которые являются уникальными для HTML - элемента. К примеру, установка list-style для элемента <ul> или tab-size для элемента <pre>. А также там, где нужно сбросить стили, которые браузер применяет к определенным элементам.

Но, не стоит излишне полагаться на них. Как правило, более полезно иметь класс определяющий стиль, который можно применять к любому HTML- элементу.

Селектор атрибутов

CSS:

[data-modal="open"] {  }

HTML:

<!-- БУДЕТ работать -->
 <div data-modal="open"></div> 
 <!-- БУДЕТ работать --> 
<aside class='closed' data-modal='open'></aside>
  <!-- НЕ БУДЕТ работать --> 
<div data-modal="false"> Неверное значение </div> 
 <!-- НЕ БУДЕТ работать --> 
<div data-modal>Нет значения </div> 
 <!-- НЕ БУДЕТ работать -->
 <div data-modal-open> Неверный атрибут </div>

Повышаем уровень

Вы, конечно, можете возразить, что селекторы атрибутов более полезны, чем селекторы классов, потому что могут не только выбирать по наличию атрибута, но и по его точному значению.

Что ж, резонно, но учтите, что селекторы атрибутов НЕ поддерживаются в IE6.

Селекторы позиций

CSS:

:nth-child(2) {  }

HTML:

<ul>   
<li>nope</li>  
 <!-- БУДЕТ работать-->  
 <li>yep, I'm #2</li>
   <li>nope</li> 
</ul>

Повышаем уровень

Есть несколько различных позиционных селекторов :nth-child. Используя простые выражения (как 3n = "каждый третий") вы можете выбирать элементы на основе их положения в HTML-документе. Вы можете поэкспериментировать с этой идеей здесь или же использовать несколько готовых рецептов.

Псевдо-селекторы

CSS:

:empty {  }

HTML:

<!-- БУДУТ работать -->
 <div></div>
  <!-- БУДУТ работать -->
 <aside data-blah><!-- nothin' --></aside>
  <!-- НЕ БУДУТ работать -->
 <div> </div>
  <!-- НЕ БУДУТ работать --> 
<div>
 </div>

Повышаем уровень

:empty является одним из множества псевдо-селекторов, которые вы можете узнать по двоеточию (:). Как правило, они представляют собой нечто, что вы не сможете распознать по элементу или атрибуту по - отдельности.

Стоит отметить, что они немного отличаются от псевдо-элементов, которые вы можете распознать по двойным двоеточиям (::). Они ответственны за добавление элементов на страницу.

Повышаем уровень

Селекторы можно объединять:

CSS:

.module.news {    
 /* Выбирает элементы из этих классов */
 } 
#site-footer::after {   
/* Добавляет  контент после элемента с ID */ 
} 
section[data-open] {  
 /* Выбирает только элементы раздела, если у них есть этот атрибут */ 
}

Есть также комбинации селекторов, таких как ~ и + и > которые влияют на селекторы, следующим образом:

CSS:

.module > h2 {   
/* Выбирает h2 элементы, которые являются прямыми потомками элемента этого класса */ 
}  
h2 + p {  
 /* Выбирает элементы p которые следуют непосредственно за элементом h2 */
 } 
li ~ li {   
/* Выбирает элементы li которые родственны (и следуют) за другими элементами li. */
 }