10 CSS селекторів, без яких не слід верстати

21

Від автора: Кожен раз при використанні CSS ми застосовуємо селектори. Але, незважаючи на це, селектори CSS –один з найбільш пренебрегаемых розділів специфікації.

Ми говоримо про великих перетвореннях в CSS3, але часто забуваємо про основи. Правильне застосування селекторів спрощує і прикрашає щоденне кодування. Сьогодні я хочу розповісти про 10 селекторах, які часто вислизають з пам’яті, але є ефективними і дуже корисними.

* (зірочка)

Може бути, простіше всього згадати про селекторі *, але він часто поки ще не реалізується. Він призначає всіх елементів на сторінці стилі і чудово підходить для створення скидання, а також створення стилів сторінки за замовчуванням, таких як потрібні вам шрифти і розмір.

* {
margin: 0;
padding: 0;
font-family: helvetica, arial, sans-serif;
font-size: 16px;
}

A + B

Цей селектор називається суміжних і вибирає той елемент, який слід відразу за першим. Якщо вам потрібно вибрати перший div після заголовка, то ви напишете:

header + div {
margin-top: 50px;
}

A > B

Цей селектор вибере тільки прямі дочірні елементи, на відміну від селектора A B, який обере дочірні елементи A будь-якого рівня. Цей селектор рекомендується при роботі з дочірніми елементами першого рівня батьківського елемента. Наприклад, якщо вам потрібно вибрати елементи списку першого рівня у неупорядоченном списку, це виглядає так:

  • List Item With ul
    • Sub list item
    • Sub list item
    • Sub list item
  • List Item
  • List Item

Ви застосуєте цей селектор тому, що звичайний селектор A B також обере елементи списку в межах вкладеного неупорядкованого списку

ul > li {
background: black;
color: white;
}

A[href*=»example»]

Це – дійсно класний селектор, коли потрібно трохи по-іншому призначити стилі окремої ссылке; те, що знаходиться в лапках, буде порівняна з href посилання. Наприклад, для призначення стилів всіх посиланнях на facebook синього кольору ви застосуєте:

a[href*=»facebook»] {
color: blue;
}

Є ще версія без *, яка зіставляє точний url, який можна використовувати для точних посилань.

A:not(B)

Цей селектор особливо гарний з-за свого негативного вираження, що дозволяє вам вибрати будь-яку групу елементів, які не збігаються з тим, що ви розміщуєте в B. Якщо хочете вибрати кожен div за винятком нижнього колонтитула, вам потрібно всього лише:

div:not(.footer) {
margin-bottom: 40px;
}

A:first-child / A:last-child

Селектори first-child і last-child дозволяють вибирати перший і останній дочірні елементи батьківського елемента. Вони дуже допомагають, коли справа доходить до елементів списку і видалення правого поля і рамок. Для видалення рамки у першому елементі списку і поля в останньому вам знадобиться:

ul li:first-child {
border: none;
}
ul li:last-child {
margin-right: 0px;
}

A:nth-child(n)

Селектор nth-child – простий спосіб вибрати будь дочірній елемент по порядку. Якщо, наприклад, вам потрібен третій елемент неупорядкованого списку, результат вийде такий:

ul li:nth-child(3) {
background: #ccc;
}

Можна застосовувати nth-child для вибору кожного множника числа, використовуючи змінну n , наприклад, якщо вставити 3n, він вибере номер елемента списку 3, 6, 9, 12 і так далі.

A:nth-last-child(n)

Селектор nth-last-child працює як nth-child, але замість того, щоб почати відлік з першого елемента списку, він починає вважати з останнього, тому якщо ви застосуєте його з числом два, він вибере той елемент списку, який йде перед останнім, і буде застосовуватися як селектор nth-child:

ul li:nth-last-child(2) {
background: #ccc;
}

A:nth-of-type(n)

Цей селектор робить в точності те, про що ви подумали; дивиться, елемент якого виду ви помістили в нього і вибирає, наприклад, третій елемент на сторінці, що відповідає тому, що ви написали. Для вибору третього абзацу div е ви застосуєте:

div p:nth-of-type(3) {
font-style: italic;
}

A:visited

Коли-небудь звертали увагу на те, що при пошуку чого-небудь в google вже відвідані вами сторінки стають іншого кольору? Саме це робить селектор відвідали. Він – відмінне додаток для користувачів, але іноді він нього забувають і, судячи з мого досвіду, він дуже зручний при пошуку в google.

a:visited {
color: blue;
}

Заключна думка

З мого досвіду застосування цих видів селекторів при вертске може заощадити багато часу, а також уникнути необхідності в переповненні розмітки безліччю ID. І це – тільки початок, існує ще безліч дійсно зручних селекторів, про яких іноді забувають.