Прочитав, сподобалось, переклав, поділився:
Отже, кожного разу, коли ми працюємо з CSS, ми використовуємо селектори. Однак, незважаючи на це, селектори є однією з найбільш знехтуваною частиною кодування.
Ми говоримо про великі перетвореннях в CSS3, але занадто часто забуваємо про основи. Правильне використання селекторів, робить наше повсякденне кодування більш простим і витонченим. У цій статті йтиметься річ про 10 селекторів, які часто нами упускаються, але є дуже ефективними і корисними.
*
Селектор * , який всі памятають, але не достатньо використовують. Він відповідає за стилізацію всіх елементів на сторінці, прекрасний для створення скіпів, скидання (reset), а також для створення деяких елементівпо замовчуванню на сторінці (наприклад, батьківських елементів і розміру шрифту).
|
1 2 3 4 5 6 |
* { margin: 0; padding: 0; font-family: helvetica, arial, sans-serif; font-size: 16px; } |
A+B
Цей селектор називається “суміжних селектором”. Що він робить? Вибирає елемент, який знаходиться відразу ж після першого елемента. Якщо ви хочете, вибрати перший div після хедера, тоді слід ввести:
|
1 2 3 |
header + div { margin-top: 50px; } |
A > B
Цей селектор виберає тільки прямі “дочірні” елементи (children) на відміну від A B, який оберає будь-який рівень дітей А. Цей селектор рекомендується використовувати коли ви працюєте з першим рівнем батьківського елементу. Наприклад, якщо ви хочете вибрати список елементів першого рівня з неупорядкованого списку, то це буде виглядати наступним чином:
|
1 2 3 4 5 6 7 8 9 10 11 |
<ul> <li>List Item With ul <ul> <li>Sub list item</li> <li>Sub list item</li> <li>Sub list item</li> </ul> </li> <li>List Item</li> <li>List Item</li> </ul> |
Ви б використовували цей селектор, тому що звичайний A B селектор також вибирає елементи списку всередині вкладеного неупорядкованого списку
|
1 2 3 4 |
ul > li { background: black; color: white; } |
A[href*=”example”]
Це дійсно хороший селектор, якщо вам потрібно “по-іншому” стилізувати певні посилання. Все що лежить в лапках спіпадає з тим, що лежить в href посиланнях. Наприклад, для стилізації всіх посилань на Acsy синім кольором можна використовувати:
|
1 2 3 |
a[href*="acsy"] { color: blue; } |
Існує також версія без *, яка точно відповідає URL, щоможна використати для точного посилання.
A:not(B)
Цей селектор особливо корисний через його умову виключення, яка дозволяє вибрати будь-яку групу елементів, які не відповідають тому, що ви розміщуєте в В. Якщо ви хочете вибрати кожен div, крім футера, тоді просто потрібно написати:
|
1 2 3 |
div:not(.footer) { margin-bottom: 40px; } |
A:first-child / A:last-child
First-child і last-child дозволяють нам вибрати перший і останній “дочірній” елемент батьківського елементу. Це може стати в нагоді, коли справа доходить до елементів списку та видалення margin-right (праве поле) або borders (кордонів). Щоб видалити границю у першому пункті списку і поле в останньому елементі списку, вам потрібно:
|
1 2 3 4 5 6 |
ul li:first-child { border: none; } ul li:last-child { margin-right: 0px; } |
A:nth-child(n)
nth-child це простий спосіб для вибору будь-якого “дочірнього” елемента за його впорядкованості. Якщо, наприклад, вам потрібен третій пункт списку в неупорядкованому списку, то це буде виглядати так:
|
1 2 3 |
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, але замість того щоб рахувати з першого елемента списку, він починає відлік з останнього. Тому якщо ви використовуєте його з номером 2, то він вибере елемент списку, який йде перед останнім:
|
1 2 3 |
ul li:nth-last-child(2) { background: #ccc; } |
A:nth-of-type(n)
Цей селектор робить саме те, що ви думаєте. Він бачить, який тип елемента ви розмістили на ньому, і потім вибирає відповідно. Наприклад, третій елемент на сторінці, відповідає тому, що ви набрали. Для вибору третього параграфа в div можна використати:
|
1 2 3 |
div p:nth-of-type(3) { font-style: italic; } |
A:visited
Ніколи не помічали, що коли ви шукаєте щось на Google, то ті сторінки, які ви вже відвідували, виділені іншим кольором? Це саме те, що робить visited. Це є прекрасним доповненням для користувачів.
|
1 2 3 |
a:visited { color: blue; } |