Pages Menu Stijit.com
Twitter
Categories Menu
30 CSS селекторов — виды и синтаксис селекторов

30 CSS селекторов — виды и синтаксис селекторов

Что такое селектор в css — это описание того элемента или группы элементов, которое показывает браузеру какой элемент выбрать для применения к нему стиля. Давайте рассмотрим основные CSS селекторы.

1) .Х

.topic-title {
    background-color: yellow;
}

CSS селектор по классу Х. Разница между id и классом в том, что один и тот же класс может быть у нескольких элементов на странице, а id всегда уникален. Классы стоит использовать для применения одного и того же стиля к нескольким элементам.

    Какими браузерами поддерживается:

  • IE6+
  • Chrome
  • Firefox
  • Safari
  • Opera

2) #X

#content {
    width: 960px;
    margin: 0 auto;
}

CSS селектор по id. Знак решетки перед CSS селектором Х выбирает элемент у которого id = Х. Навешивая стили по id всегда стоит помнить, что он должен быть уникальным — только один такой id должен быть на странице. Поэтому лучше использовать селекторы по классам, комбинациям классов или названиям тэгов. Тем не менее, селекторы по id отлично применяются в автоматизированном тестировании, т.к. позволяют сразу взаимодействовать именно с нужным элементом и иметь уверенность что он только один такой на странице.

    Какими браузерами поддерживается:

  • IE6+
  • Chrome
  • Firefox
  • Safari
  • Opera

3) *

* {
    margin: 0;
    padding: 0;
}

CSS селектор всех элементов. Символ звездочки выбирает все элементы которые есть на странице. Многие разработчики используют его для того, чтобы убрать (обнулить) значения отступов (margin и padding) у всех элементов страницы. Тем не менее, на практике лучше так не делать потому, что этот CSS селектор довольно сильно грузит браузер перебором всех элементов на странице.

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

#header * {
    border: 5px solid grey;
}

В этом примере выделяются все дочерние элементы (потомки) элемента с #header. Но всегда стоит помнить, что этот селектор достаточно тяжел для браузера.

    Какими браузерами поддерживается:

  • IE6+
  • Chrome
  • Firefox
  • Safari
  • Opera

4) X

a {
    color: green;
}
ol {
    margin-left: 15px;
}

CSS селектор типа. Как выбрать все элементы одного типа, если у них нет ни id ни классов? Стоит использовать CSS селектор по типу элемента. К примеру, чтобы выбрать все упорядоченные списки на странице, используйте ol {...} как это показано выше.

    Какими браузерами поддерживается:

  • IE6+
  • Chrome
  • Firefox
  • Safari
  • Opera

5) Х Y

li a {
    font-weight: bold;
    text-decoration: none;
}

CSS селектор потомков или CSS селектор дочерних элементов используется чаще всего. Его используют если необходимо выбрать элементы определенного типа из множества дочерних элементов. Например, нужно выделить все ссылки, которые находятся в элементе li. В этом случае используйте этот селектор. Используя цепочки таких селекторов, всегда спрашивайте себя, а можно ли для выделения данного элемента использовать еще более короткую последовательность селекторов.

    Какими браузерами поддерживается:

  • IE6+
  • Chrome
  • Firefox
  • Safari
  • Opera

6) Х + Y

div + p {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 18px;
}

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

    Какими браузерами поддерживается:

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Chrome

7) Х > Y

#content > ul {
    border: 1px solid green;
}

CSS селектор потомков. Разница между селекторами Х Y и X > Y в том, что рассматриваемый CSS селектор будет выбирать только непосредственные дочерние элементы (выберет только прямых потомков). К примеру:

<div id="content">
    <ul>
       <li>Элемент списка
         <ul>
            <li>Потомок первого элемента списка</li>
         </ul>
       </li>
       <li>Элемент списка</li>
       <li>Элемент списка</li>
    </ul>
</div>

CSS селектор #content > ul выберет только ul, который является прямым потомком блока div с id="container". Он не выберет ul, являющийся потомком первого li. Это достаточно выгодный по скорости работы CSS селектор.

    Какими браузерами поддерживается:

  • IE7+
  • Chrome
  • Firefox
  • Safari
  • Opera

8) Х ~ Y

ol ~ p {
    margin-left: 10px;
}

Селектор сестринских (саблинговых) элементов менее строгий чем X + Y. Он выберет не только первый, но и все остальные элементы p, идущие за ol.

    Какими браузерами поддерживается:

  • IE7+
  • Chrome
  • Firefox
  • Safari
  • Opera

9) X:visited and X:link

a:link {
    color: green;
}
a:visited {
    color: grey;
}

Псевдо-класс :link используется для выбора всех ссылок, на которые еще не кликнули. Если же нужно применить определенный стиль к уже посещенным ссылкам, то для этого используется псевдо-класс :visited.

    Какими браузерами поддерживается:

  • IE7+
  • Chrome
  • Firefox
  • Safari
  • Opera

10) X[title]

a[title] {
    color: red;
}

CSS селектор по атрибуту. В этом примере выбираются только те ссылки, у которых есть атрибут title.

    Какими браузерами поддерживается:

  • IE7+
  • Chrome
  • Firefox
  • Safari
  • Opera

11) X [href=“foo”]

a[href="http://www.stijit.com/"] {
  color: yellow;
}

Все ссылки, атрибут href у которых равен http://www.stijit.com/ станут желтыми. Остальные ссылки выбраны не будут.

    Какими браузерами поддерживается:

  • IE7+
  • Chrome
  • Firefox
  • Safari
  • Opera

12) X [href*=“stijit”]

a[href*="stijit"] {
    color: #dfc11f;
}

Звездочка означает, что искомое значение должно быть где-нибудь в атрибуте (в любой части атрибута href). Таким образом, будут выбраны и ссылки с http://www.stijit.com/ и www.stijit.com и stijit.com. Ко всем выбранным ссылкам будет применен золотой цвет.

    Какими браузерами поддерживается:

  • IE7+
  • Chrome
  • Firefox
  • Safari
  • Opera

13) X[href^=“http”]

a[href^="http"] {
    background: url(path/to/external/icon.png) no-repeat;
    padding-left: 15px;
}

На некоторых сайтах рядом со ссылками, ведущими на другие сайты, проставлены небольшие иконки со стрелочками, чтобы показать что это внешние ссылки. Карат «^» — это символ для обозначения начала строки. Таким образом для выбора всех тэгов, у которых href начинается с http, нужно использовать CSS селектор с каратом, как это показано на примере выше.

    Какими браузерами поддерживается:

  • IE7+
  • Chrome
  • Firefox
  • Safari
  • Opera

14) X[href$=“.jpg”]

a[href$=".jpg"] {
    color: green;
}

Здесь используется регулярное выражение и символ $ для того, чтобы обозначить конец строки. В данном примере мы ищем все ссылки, которые ссылаются на картинки с расширением .jpg.

    Какими браузерами поддерживается:

  • IE7+
  • Chrome
  • Firefox
  • Safari
  • Opera

15) X[data-*=“foo”]

a[data-filetype="image"] {
    color: green;
}

Здесь мы применяем CSS селектор по пользовательскому атрибуту. Добавляем наш собственный атрибут data-filetype в каждую ссылку:

<a href="path/to/image.jpg" data-filetype="image">ссылка</a>

Теперь, с помощью приведеного выше CSS селектора, можно выбирать все ссылки ведущие на картинки с любым расширением.

    Какими браузерами поддерживается:

  • IE7+
  • Chrome
  • Firefox
  • Safari
  • Opera

16) X[foo~=“bar”]

Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных пробелом. Можно прописать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Таким образом можно указать, что ссылка является внешней и ведет на изображение.

<a href="path/to/image.jpg" data-info="external image">ссылка</a>

С помощью такого приема мы можем выбирать элементы с нужными нам комбинациями атрибутов:

/* Выбрать элемент, атрибут data-info которого содержит значение external */
a[data-info~="external"] {
    color: green;
}

/* Выбрать элемент, атрибут data-info которого содержит значение image */
a[data-info~="image"] {
    border: 2px dashed black;
}
    Какими браузерами поддерживается:

  • IE7+
  • Chrome
  • Firefox
  • Safari
  • Opera

17) X:checked

input[type=radio]:checked {
    border: 3px outset black;
}

Этот псевдокласс выделяет только такие элементы, как checkbox или radio button, причем только когда они уже в отмеченном состоянии.

    Какими браузерами поддерживается:

  • IE9+
  • Chrome
  • Firefox
  • Safari
  • Opera

18) X:after

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

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }

.clearfix {
    *display: inline-block;
    _height: 1%;
}

Здесь при помощи псевдо-класса :after после блока с классом .clearfix создается пустая строка, после чего очищается. Этот подход используется если невозможно применить свойство overflow: hidden.

    Какими браузерами поддерживается:

  • IE8+
  • Chrome
  • Firefox
  • Safari
  • Opera

19) X:hover

div:hover {
    background-color: rgba(11,77,130,0.5);
}

Применяет к элементу определенный стиль, когда на него наводится курсор мыши. Старые версии Internet Explorer применяют :hover только к ссылкам.

a:hover {
    border-bottom: 1px dotted blue;
}
    Какими браузерами поддерживается:

  • IE6+ (В IE6 применимо только к ссылкам)
  • Chrome
  • Firefox
  • Safari
  • Opera

20) X:not(selector)

div:not(#content) {
    color: grey;
}

Псевдокласс not (отрицания) бывает полезен когда, к примеру, нужно выбрать все div, за исключением того, который имеет id="content".

По такому же принципу можно выбрать все элементы кроме p:

*:not(p) {
    color: blue;
}
    Какими браузерами поддерживается:

  • IE9+
  • Chrome
  • Firefox
  • Safari
  • Opera

21) X::pseudoElement

p::first-line {
    font-weight: bold;
    font-size: 24px;
}

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

Выбор первой буквы параграфа:

p::first-letter {
    font-family: cursive;
    font-size: 30px;
    font-weight: bold;
    padding-right: 1px;
}

Выбор первой строки в параграфе:

p:first-line {
    font-size: 28px;
    font-weight: bold;
}
    Какими браузерами поддерживается:

  • IE6+
  • Chrome
  • Firefox
  • Safari
  • Opera

22) X:first-child

ul li:first-child {
    border-top: none;
}

Псевдокласс first-child выбирает только первого потомка родительского элемента. Часто используется чтобы убрать border в первом элементе списка. Этот псевдокласс был еще начиная с CSS 1.

    Какими браузерами поддерживается:

  • IE7+
  • Chrome
  • Firefox
  • Safari
  • Opera 3.5+
  • Android
  • iOS

23) X:last-child

ul > li:last-child {
    border-bottom: none;
}

Псевдокласс last-child выбирает последнего потомка родительского элемента. Он появился только начиная с CSS 3.

    Какими браузерами поддерживается:

  • IE9+ (IE8 поддерживает first-child, но не last-child. Microsoft (с))
  • Chrome
  • Firefox
  • Safari
  • Opera 9.6+
  • Android
  • iOS

24) X:only-child

div p:only-child {
    color: green;
}

Псевдокласс only-child позволяет выбрать те элементы, которые являются единственными потомками для своих родителей.

    Какими браузерами поддерживается:

  • IE9+
  • Chrome
  • Firefox
  • Safari 3.0+
  • Opera 9.6+
  • Android
  • iOS

25) X:nth-child(n)

li:nth-child(3) {
    color: black;
}

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

    Какими браузерами поддерживается:

  • IE9+
  • Chrome
  • Firefox 3.6+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

26) X:nth-last-child(n)

li:nth-last-child(2) {
    color: red;
}

Если у вас большой список элементов в ul и нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(109), можно использовать селектор последних потомков nth-last-child. Этот метод такой же как и предыдущий, но отсчет ведется с конца.

    Какими браузерами поддерживается:

  • IE9+
  • Chrome
  • Firefox 3.6+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

27) X:nth-of-type(n)

ul:nth-of-type(3) {
    border: 1px dotted black;
}

Если на странице есть четыре неупорядоченных списка и нужно применить стиль только к третьему из них, не имеющему уникального id, стоит использовать nth-of-type.

    Какими браузерами поддерживается:

  • IE9+
  • Chrome
  • Firefox 3.6+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

28) X:nth-last-of-type(n)

ul:nth-last-of-type(3) {
    border: 2px ridge blue;
}

Псевдокласс nth-last-of-type(n) предназначен для выбора n-ого элемента определенного типа с конца.

    Какими браузерами поддерживается:

  • IE9+
  • Chrome
  • Firefox 3.6+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

29) X:only-of-type

li:only-of-type {
    font-weight: bold;
}

Псевдокласс only-of-type выбирает элементы, не имеющие соседей в пределах родительского элемента. К примеру можно выбирать все ul, которые содержат только одинокие li.

    Какими браузерами поддерживается:

  • IE9+
  • Chrome
  • Firefox 3.5+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

30) X:first-of-type

ul:first-of-type > li:nth-child(3) {
    font-style: italic;
}

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

    Какими браузерами поддерживается:

  • IE9+
  • Chrome
  • Firefox 3.5+
  • Safari 3.1+
  • Opera 9.5+
  • Android 2.1+
  • iOS 2.0+

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *