Каска
В свою очередь, CSS-селектор — это формальное описание того элемента или группы элементов, к которым применяется указанное правило стиля. Селекторы являются одной из самых важных частей CSS. Они формируют каскад и определяют, как стили должны применяться к элементам страницы. Именно поэтому front-end разработчику необходимо знать селекторы и не забывать о возможностях спецификации CSS3.
Основные виды селекторов
1. *
Самый простой — универсальный селектор, который соответствует любому элементу на странице. Часто разработчики используют его для обнуления свойств margin и padding. Но не рекомендовано использовать этот селектор в рабочих проектах. Он слишком нагружает браузер.
Универсальный селектор * также можно использовать для стилизации всех потомков элемента.
В данном примере стиль применится ко всем потомкам элемента #container div. Но лучше этот селектор вообще не использовать.
2. #X
Использование символа решётки позволяет обратиться к id элемента. Идентификатор id должен быть уникальным и может использоваться на странице только один раз. Но также старайтесь не злоупотреблять использованием идентификаторов.
3. .X
class - это селектор класса. Отличие селектора class от id в том, что класс не должен быть уникальным и может использоваться для выбора нескольких элементов на странице. Использование id позволяет выбрать конкретный уникальный элемент.
4. X
Что вы будете делать, если вам понадобится выбрать только элементы определённого типа? В этом случае вы не сможете использовать селектор по типу элемента. Если вам нужны все ссылки, просто используйте а {}.
Селекторы можно комбинировать, записывая последовательно, без пробела:
Отношения
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 "