20 июл 2017 • ~ на 14 мин. • CSS • css, шпаргалка,

30 CSS-селекторов, которые должен знать каждый

Если Вы разобрались с основными селекторами: id, class, селекторами потомков и считаете что этого достаточно, то Вы теряете очень много в плане гибкости управления внешним видом элементов на странице.

Предлагаю для ознакомления перечень основных css-селекторов, правильное применение которых значительно упростит стилизацию сайта. Начнем с простейших вещей для новичков и будем продвигатся по нарастающей.

1. *

* {
 margin: 0;
 padding: 0;
}

Символ звездочки позволяет выбрать все элементы на странице. Многие веб-разработчики используют это для “обнуления” всех внешних и внутренних отступов.

Также символ * можно использовать для дочерних элементов объекта.

#container * {
 border: 1px solid black;
}

Этот код нацелен на все элементы, которые являются дочерними по отношению к блоку с идентификатором container.

Совместимость: IE6+, Firefox, Chrome, Safari, Opera

2. #X

#container {
   width: 960px;
   margin: auto;
}

Символ решетки позволяет нам отбирать элементы по идентификатору. Это один из наиболее распространенных способов отбора элементов, однако будьте осторожны при его использовании.

“Спросите себя: Мне точно необходимо использовать id для какого-то элемента, чтобы сослаться на него?”

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

Совместимость: IE6+, Firefox, Chrome, Safari, Opera

3. .X

.error {
  color: red;
}

Это селектор класса. Разница между id и классами в том, что с помощью классов можно выбирать сразу несколько элементов. Используйте классы, если Вам нужно применить один стиль к группе элементов.

В противном случае используйте id для нахождения “иголки в стоге сена” и применения стиля только к одному конкретному объекту.

Совместимость: IE6+, Firefox, Chrome, Safari, Opera

4. X Y

li a {
  text-decoration: none;
}

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

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

“Совет: Если Ваш селектор похож на X Y Z A B.error, то Вы, вероятно, что-то делаете на так. Всегда спрашивайте себя, действительно ли это самый простой способ”

Совместимость: IE6+, Firefox, Chrome, Safari, Opera

5. X

a {color: red;}
ul {margin-left: 0px;}

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

Совместимость: IE6+, Firefox, Chrome, Safari, Opera

6. X:visited и X:link

a:link {color: red;}
a:visited {color: purple;}

Здесь мы используем псевдо-класс :link для выбора всех ссылок, на которых еще не был совершен клик.

Также есть псевдо-класс :visited, который позволяет нам применить стиль только к тем ссылкам, по которым был совершен клик или переход.