Что вы не знали о селекторах CSS?

Всем привет, хабрчане.
Сегодня CSS окружает нас вокруг, и даже маломайский программист должен понимать его.
Самыми используемыми являются старые добрые #id и .class они знакомы всем, кто хоть раз работа с CSS.
На этом конечно мир Селекторов далеко не ограничивается. Я уже довольно давно работаю с CSS и хочу поделится как можно большим количеством полезных селекторов. Все они определяют стиль того или иного объекта.

CSS Selectors

Объясняю многие селекторы применимо к указанному примеру.

.class

(Пр. .main) Данный селектор объединяет все элементы с классом «main». Родился он давно и активно учувствует в разработке.

#id

(Пр. #Block_Form) Этот селектор объедение элементы с id=«Block_Form» В чем скажите разница между .class и #id — а разницу можно понять на примере: то что ПАСПОРТНЫЙ НОМЕР = id, ФАМИЛИЯ = class. Также немало важно то, что — Идентификатор (id) можно вызвать из скрипта используя функцию GetElementById, в отличие от класса.
Класс может быть использован многократно, идентификатор же должен быть уникальным.

*

Выбирает, объединяет все элементы

(Пр. *)
 { 
 background-color:yellow;
 })    

element

(Пр. p ) Объединяет все элементы тега p.

element,element

(Пр. div,p) Объединяет все элементы div и все элементы p
.
Так же в эту группу можно выделить похожие селекторы:

element element

(Пр. div p) Выбирает все элементы p внутри div.

element>element

(Пр. div>p) Объединяет все p для которых родителем выступает div.

element+element

(Пр. div+p) Объединяет все p которые расположены сразу после div.

[attribute]

(Пр. [target]) Объединяет все элементы с атрибутом target

[attribute=value]

(Пр. [target=_blank]) Объединяет все элементы с заданным target="_blank"

[attribute~=value]

(Пр. [title~=Apple]) Объединяет все элементы, которые в своем title содержат «Apple»

[attribute|=value]

(Пр. [class|=top]) Объединяет все элементы с атрибутом class начиння с «top»

Все теги написаны были без "<>".

Дальше считаю обязательно нужно показать именно эти селекторы, так как они являются очень важными и крайне часто используются в решении многих задач — от Простых анимашек с наведением курсора, оформлением ссылок, картинок и прочего до более глобальной цели уменьшения кода в целом.

Так же их называют Псевдокласы:

:link

(Пр. a:link) Объединяет все ссылки, которые еще не посещались

:visited

(Пр. a:visited) Объединяет все ссылки, которые пользователь уже успел посетить

:active

(Пр. a:active) Псевдокласс :active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.

:hover

(Пр. a:hover) Когда проводишь мышкой, ссылка может менять стиль

:focus

(Пр. input:focus) Изменяет стиль при фокусировке. на практике часто используется для подсветки полей формы при фокусировке на нем

:first-letter

(Пр. p:first-letter) Определяет стиль для первого символа в тексте элемента

:first-line

(Пр. p:first-line) Определяет стиль первой строки. Использую для изменения цвета текста, цвета фона и шрифта, но как показывают народные хабрумельцы на этом его функции не ограничиваются

:first-child

(Пр. p:first-child) Что бы просто объяснить — применяет стилевое оформление к первому дочернему элементу своего родителя. В примере если р есть первым элементом своего родителя
Дальше идут два очень интересных класса:

:before

(Пр. p:before)

:after

(Пр. p:after)
Они применяются в тех случаях, когда — нужно отобразить нужный контент до или после содержимого элемента, к которому он добавляется. Работает совместно со свойством content:. Так же я их использую как дополнительные элементы вместо div, в таком случае нужно прописывать content:"";. Также нужно помнить о том, что при добавлении :before к блочному элементу, значение свойства display может быть только: block, inline, none, list-item. Все остальные значения будут трактоваться как block. При добавлении :before к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.
:before наследует стиль от элемента, к которому он добавляется.

:lang(language)

(Пр. p:lang(it)) Довольно простой, но порой нужный элемент — для примера: Определяет стиль каждого p с атрибутом lang, значение которого начинается с «it»

Селекторы CSS3

Данные селекторы вызывают большой интерес, так как они мало кем используются и, конечно, хочется разобраться как ими пользоваться, поэтому буду приводить примеры. Также в данной группе селекторов в многострадальном IE8 и раньше DOCTYPE должен быть объявлен.

element1~element2

(Пр. p~ul)

p~ul
 {
 background:red;
 }

Устанавливает цвет фона для всех ul элементов, которые предшествуют p с таким же родителем. Грубо говоря — на этом примере, красным будет бэкграунд только у тех «списков» которые стоят после родителя тега р.

<div>A div element.</div>
  
   <ul>
    <li>Item  </li>
   <li> Item  </li>
   <li> Item  </li>
</ul>
  

— в этом случае ничего не произойдет, а в

<p>Another</p>
  <ul>
    <li>Item  </li>
   <li> Item  </li>
   <li> Item  </li>
</ul>
  

а в этом случае поля Айтемов будут иметь бэк-цвет — красный.

[attribute^=value]

(Пр. a[src^=«https»]) По примеру определяет стиль каждого a для которого значение элемента src начинающегося с «https». Вот еще пример:

<html>
<head>
<style> 
[class^="test"]
{
background:#ffff00;
}
</style>
</head>
<body>

<div class="first_test">item1</div>
<div class="second"> item2</div>
<div class="test"> item3</div>
<p class="test"> item4</p>

</body>
</html> 

Проще говоря – данный селектор дает возможность установить цвет фона на всех div элементов, которые имеют значение атрибута класса, начинающихся с «тест» – а именно item3, item4.

[attribute$=value]

(Пр. a[src$=".pdf"]) Выбирает каждый тег a, для которого SRC значение атрибута заканчивается на ". PDF. И вот еще один наглядный пример:

<html>
<head>
<style> 
div[class$="test"]
{
background:red;
}
</style>
</head>
<body>
<div class="first_test"> Item1</div>
<div class="second"> Item2</div>
<div class="test"> Item3</div>
<p class="test"> Item4 </p>
</body>
</html>

На этом примере очень хорошо будет видно использование данного селектора, а именно в Красный цвет перекрасятся Item1 (по тому что класс заканчивается на _test) и item3.

[attribute*=value]

(Пр. a[src*=«w3schools»]) Выбирает каждый тег a, для которого значение атрибута SRC содержит подстроку «w3schools».

<html>
<head>
<style> 
div[class*="test"]
{
background:red;
}
</style>
</head>
<body>
<div class="first_test">item1</div>
<div class="second"> item2</div>
<div class="test"> item3</div>
<p class="test"> item4</div>
</body>
</html>

В этом примере результатом будут закрашенные строки item1, item3, item4.


Дальше перейдем к псевдоклассам

:first-of-type

(Пр. p:first-of-type) Задает правила стилей для первого элемента в списке дочерних элементов своего родителя.

:last-of-type

(Пр. p:last-of-type) Соответственно задает правила стилей для последнего элемента в списке дочерних элементов своего родителя.

:only-of-type

(Пр. p:only-of-type) А вот этот применяется к дочернему элементу указанного типа, только если он единственный у родителя. Аналогично как :first-of-type:last-of-type или :nth-of-type(1):nth-last-of-type(1).

:only-child

(Пр. p:only-child) Такой элемент применяется по примеру к дочернему элементу p, только если он единственный у родителя

Следующие два можно также неплохо использовать для определенной последовательности – нечетные (odd), четные(even) или число(1,2,3… или выражения 2n+1), заданные в (Х):

:nth-child(n)

(Пр. p:nth-child(2)) Для каждого

, который является вторым дочерним элементом у родителя.

:nth-last-child(n)

(Пр. p:nth-last-child(2)) Тот же смысл, что и у предыдущего, кроме того, что отсчет ведется не от первого элемента, а от последнего.

:nth-of-type(n)

(Пр. p:nth-of-type(2)) Используется для добавления стиля к элементам указанного типа на основе нумерации. Например, для картинок у заглавия применить со значением Float: -left or –right.

:nth-last-of-type(n)

(Пр. p:nth-last-of-type(2)) Тоже, что и предыдущий, но отсчет ведется не от первого элемента, а от последнего.

:last-child

(Пр. p:last-child) Данный селектор задает стилевое оформление последнего элемента своего родителя.


Также стоит выделить:

:root

(Пр. :root) Такой селектор определяет корневой элемент документа, иначе говоря — .

:empty

(Пр. p:empty) Определяет пустые элементы — без каких-либо дочерних элементов, текста или пробелов.

:target

(Пр.#news:target) Грубо говоря – это определение на основе целевого элемента. В примере определение текущего id — #news element. Используется для URL.

:enabled

(Пр. input:enabled) Применяется к формам, как доступ к доступным (не заблокированным — disabled) элементам форм, простите за тавтологию.

:disabled

(Пр. input:disabled) Иначе говоря – применимо к стилю заблокированных элементов формы.

:checked

(Пр. input:checked) Данный псевдокласс применим к элементам интерфейса, таким как переключатели (checkbox) и флаги (radio), когда они включены, конечно же.

:not(selector)

(Пр. :not(p)) На примере стиль применяется ко всем элементам, которые не p. В качестве селектора могут быть псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов.

Ура. На этом данный топик исчерпан, все денные подготовлены на основе личного опыта и конечно же официальных документаций. Статья подготовлена за 2 дня. Будут вопросы – задавайте.