лицы Стилей или CSS (Cascading Style Sheets) — это набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид.

В свою очередь, CSS-селектор — это формальное описание того элемента или группы элементов, к которым применяется указанное правило стиля. Селекторы являются одной из самых важных частей CSS. Они формируют каскад и определяют, как стили должны применяться к элементам страницы. Именно поэтому front-end разработчику необходимо знать селекторы и не забывать о возможностях спецификации CSS3.

Основные виды селекторов

1. *

Самый простой — универсальный селектор, который соответствует любому элементу на странице. Часто разработчики используют его для обнуления свойств margin и padding. Но не рекомендовано использовать этот селектор в рабочих проектах. Он слишком нагружает браузер.

Универсальный селектор * также можно использовать для стилизации всех потомков элемента.

В данном примере стиль применится ко всем потомкам элемента #container div. Но лучше этот селектор вообще не использовать.

2. #X

Использование символа решётки позволяет обратиться к id элемента. Идентификатор id должен быть уникальным и может использоваться на странице только один раз. Но также старайтесь не злоупотреблять использованием идентификаторов.

3. .X

class - это селектор класса. Отличие селектора class от id в том, что класс не должен быть уникальным и может использоваться для выбора нескольких элементов на странице. Использование id позволяет выбрать конкретный уникальный элемент.

4. X

Что вы будете делать, если вам понадобится выбрать только элементы определённого типа? В этом случае вы не сможете использовать селектор по типу элемента. Если вам нужны все ссылки, просто используйте а {}.

Селекторы можно комбинировать, записывая последовательно, без пробела:

• c1.c2 — элементы одновременно с двумя классами c1 и c2
• a#id.c1.c2:visited — элемент a с данным id, классами c1 и c2, и псевдоклассом visited

Отношения

5. X Y

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

Однако если ваш селектор выглядит так: X Y Z A B.error, то вы совершаете ошибку. Старайтесь избегать длинных вложений.

6. X > Y

Разница между селекторами X Y и X > Y в том, что в последнем примере мы выберем только прямого потомка. Данный способ выбора элементов является очень эффективным. Рекомендуется использовать его, особенно при работе с JavaScript.

7. X + Y

Это соседний селектор. Он поможет нам выбрать только тот элемент, который следует сразу же за указанным элементом. В этом примере: ul + p {color: red;} - мы выберем только первый параграф текста, следующий сразу за тэгом ul.

8. X ~ Y

Этот селектор похож на X + Y, но он менее строгий. Селектор X ~ Y выберет все элементы p, расположенные после элемента ul.

Фильтр по месту среди соседей

При выборе элемента можно указать его место среди соседей.

9. X:first-child

Этот псевдокласс позволит нам выбрать только первый дочерний элемент.

10. X:last-child

Соответственно, last-child выберет последний дочерний элемент.

Однако, IE8 поддерживает :first-child, но не поддерживает :last-child.

11. X:only-child

Псеводкласс only-child не очень популярный. Но он существует, и знать о нём нужно.

Он позволяет выбрать элемент, являющийся единственным наследником своего родителя. В примере выше абзац, являющийся единственным наследником элемента div, получит красный цвет шрифта.

Давайте рассмотрим такой пример.

1 2 3 4 5 6

<div><p> My paragraph here. </p></div>   <div>         <p> Two paragraphs total. </p>         <p> Two paragraphs total. </p> </div>

В этом случае текст во втором элементе div останется без изменений. Только текст в первом div станет красным. Если у элемента более одного наследника, псевдокласс only-child не действует.

12. X:nth-child(a)

Позволяет выбрать конкретный элемент. Псевдокласс nth-child принимает в качестве параметра число, и нумерация начинается с 1. Если вам нужен второй по счёту элемент, используйте li:nth-child(2).

13. X:nth-child(a+n)

Pасширение предыдущего селектора позволяет использовать этот псевдокласс для выбора нескольких элементов. Например, li:nth-child(4n) позволит нам выбрать каждый четвертый элемент списка.

14. X:nth-last-child(a), X:nth-last-child(a+n)

Этот метод работает аналогично nth-child, Отличие в том, что отсчёт элементов ведётся с конца.

Фильтр по месту среди соседей с тем же тегом

Бывает, что вместо наследников child вам нужно выбрать элементы по их типу. Представьте, что у вас на странице есть пять списков. И вам нужно стилизовать только третий список. И у него нет уникального id. в таком случае пригодятся аналогичные псевдоклассы, которые учитывают не всех соседей, а только с тем же тегом:

15. X:nth-of-type(n)

Благодаря псевдоклассу nth-of-type(n) только у третьего списка будет рамка.

16. X:first-of-type

Псевдокласс first-of-type выбирает первого наследника указанного типа.

17. X:last-of-type

Псевдокласс last-of-type выбирает последнего наследника указанного типа.

18. X:only-of-type

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

19. X:nth-last-of-type(n)

Как в предыдущих примерах, можно использовать nth-last-of-type для отсчёта элементов с конца.

Другие псевдоклассы

20. X:hover

Официальное название этого селектора - псевдокласс пользовательского действия. На практике это означает, что вы сможете изменить стиль элемента в момент наведения на него кусора мыши.

Помните, что старые версии Internet Explorer не распознают :hover, если он используется не на ссылках.

21. X:focus

Псевдокласс :focus определяет стиль для элемента, получающего фокус.

22. X:active

Псевдокласс :active определяет стиль активного элемента. Это такое состояние элемента, которое происходит между щелчком и отпусканием клавиши мыши. В основном применяется к ссылкам и кнопкам, но ими не ограничен.

23. X:visited и X:link

Псевдокласс :link используется для стилизации ссылок, на которые пользователь ещё не нажимал. И псевдокласс :visited для стилизации ссылок, на которые пользователь уже нажал.

24. X:not(selector)

Псевдокласс отрицания бывает очень полезен. Представьте, что вам нужно выбрать все тэги div, кроме одного с id равным container. Код выше сделает именно это.

25. X:checked

Данный псевдокласс выберет только отмеченные элементы пользовательского интерфейса: радиокнопки или чекбоксы.

26. X:default, X:disabled, X:enabled и другие

Псевдоклассы для стилизации разных состояний input.

Псевдоэлементы

27.X:before, X:after

Псевдоклассы :before и :after сейчас очень популярны. Эти псевдоклассы позволяют нам сгенерировать контент вокруг указанного элемента.

:before применяется для отображения контента до содержимого элемента, к которому он добавляется.

:after, который используется для вывода контента после содержимого элемента, к которому он добавляется. Оба псевдоэлемент работают совместно со свойством content.

Согласно спецификации CSS3, псевдоклассы должны отделяться двойным двоеточим ::. Но современные браузеры прекрасно поймут ваш код и с одним двоеточим.

28. X:first-line, X:first-letter

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

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

На атрибут целиком:

29. X[attr]

Это селектор атрибутов. Он выберет только те ссылки, у которых имеется указанный атрибут. Если нужно что-то более конкретное...

30. X[attr="val"]

Стили применятся для селектора с атрибутом равным “val”.

Не забудьте, что значение атрибута нужно заключать в кавычки. Особенно внимательны будьте при использовании JavaScript.

На начало атрибута:

31. X[attr^="val"]

Атрибут начинается с val, например "value".

32. X[attr|="val"]

Атрибут равен val или начинается с val-, например равен "val-1".

На содержание:

33. X[attr*="val"]

Звёздочка означает, что указанное значение должно быть частью указанного атрибута. Поэтому этот селектор выберет и nettuts.com, и net.tutsplus.com, и даже tutsplus.com.

Но помните, что этот способ слишком обширен.

34. X[attr~="val"]

Символ тильда (~) позволяет выбрать атрибут, в котором есть значения, разделённые пробелом.

Например: [attr~="delete"] верно для "edit delete" и неверно для "undelete" или "no-delete".

На конец атрибута:

35. X[attr$="val"]

Символ $ указывает на конец строки. В этом случае мы ищем все ссылки на картинки, т.е. путь в них должен заканчиваться на .jpg.

Учтите, что это не сработает для файлов gif и png.

Заключение

Если вам приходится поддерживать старые браузеры, такие как Internet Explorer 6, то будьте осторожны с использованием новых селекторов. Однако это не повод отказаться от их изучения. Они дают возможность делать более точную выборку нужных элементов, и не стилизовать все элементы HTML одновременно.

Web-разработчик
Компании IT-Мастерская

Поделиться:

Комментариев: " 5 "