Что вы не знали о селекторах 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 дня. Будут вопросы – задавайте.

Теги:
css3

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

Похожие публикации