CSS селекторы про которые вы могли не знать

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

Как выбрать все теги при помощи CSS

В отличие от селектора body, * выделит все элементы на странице:

* {
color: #c00;
}

Думаю, вы уже знаете самые простые способы выбора: p – выберет все теги p (тег параграфа), .my-class – выберет все классы .my-class на странице и #my-id – как вы уже догадались, id (вот это поворот 🙂 ). Стоит отметить, что в современной разработке id стоит использовать лишь в 2 случаях: если вам нужно сделать ссылку на какой-то конкретный элемент страницы (анкор) или если вы используете javascript.

Есть совмещенные селекторы p.my-class – выберет все параграфы с классом .my-class, все остальные элементы на странице выбраны не будут. Стили можно применять для нескольких селекторов:

.my-class,
.my-new-class,
h3 {
    color: #c00;
}

CSS выбор по иерархии

Чтобы проще было ориентироваться в тегах используют такие понятия как родитель и потомок. Посмотрим на практике

<p>Наш текст.</p>
<h2>Наш заголовок</h2>
<div class="my-parent">
    <div class="my-child1"></div>
    <div class="my-child2">
        <div class="little"></div>
    </div>
</div>

Тег p, h2 и .my-parent не являются родителями или потомками по отношению друг к другу – это рядом лежащие теги, на одном уровне так сказать (обычно вложенность выделяется знаком табуляции или двумя пробелами). Но вот .my-child1 и .my-child2 это потомки .my-parent, и для них .my-parent является родителем.

.my-parent .my-child1 {} /* выберет только один класс my-child1 */

.my-parent div {} /* выберет все лежащие внутри div */

.my-parent > div {} /* выберет div лежащие на 1ом уровне */

Последняя запись означает что класс .little не будет выбран

Как выбрать первый, последний, следующий элемент.

С первым и последним элементом все понятно.

.my-parent > div:first-child {}
.my-parent > div:last-child {}

Есть вариант выбирать номер по порядку:

.my-parent > div:nth-child(2) {}

Еще одна важная вещь – как выбрать отрицание:

.my-list > div:not(:first-child) {}

такой код выберет все, кроме первого div элемента.

А вот на выборе следующего элемента остановимся более детальней. Данный код будет выбирать только те h2 которые идут после p (не забудьте, элементы должны лежать на одном уровне, они не должны быть вложены и т.д.):

p + h2 {}

Но что делать если нам нужно выбрать все элементы после конкретного селектора?

h2 ~ div {}

Этот код выберет все div которые лежат сразу после h2

Как выбрать тег по его атрибуту

Еще один вариант выбора тега по его атрибуту. Предположим что у нас есть такие вот 2 кнопки в форме:

<input type="text" value="">
<input type="submit" value="send">

Как видите, у наших кнопок нету классов. Предположим что вам нужно как-то добраться до них:

input[type=text] {}
input[type=submit] {}

Как вы возможно поняли, выбирать можно по любым атрибутам, указывая таким вот образом. Не забудьте, что такой выбор отлично работает в случае активных действий мыши:

input[type=text]:focus {}
input[type=submit]:hover {cursor: pointer;}

Напоследок хотелось бы рассказать про, так называемые data- атрибуты. В HTML5 появилась возможность в коде указывать не только стандартные атрибуты, но и произвольные атрибуты, которые могут нам пригодится. Как работают дата атрибуты:

<p class="my-class" data-title="Hello, "></p>

Мы записали текстовую информацию в наш собственный атрибут data-title. Тут может быть любая информация – кстати говоря, отлично подойдет для данных полученных динамическим путем. Наш CSS код:

.my-class:before {
  content: attr(data-title);
}

Мы выводим фразу “Hello, ” сразу перед основным содержимым.
Ну вот и все что я хотел рассказать в этом небольшом обзоре. Почитайте в интернете какие еще есть способы выбора и обязательно попробуйте все что вы узнали на практике 🙂