CSS селектори

CSS селектори — це своєрідна логіка, завдяки якій присвоюють ті, чи інші значення потрібним елементам. Попри те, що тут не буде розшифровки варіантів самих параметрів, Ви матимете ключ, щоб достукатись до будь-якого об’єкту у Вас на сторінці.

Річ напрочуд корисна, якщо врахувати, що логіка використовується не лише в каскадних (CSS) стилях, але й javascript та його бібліотеках (Jquery, Mootools), а також в багатьох інших фреймворках.

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

Хлопаки з W3Schools намудрували тестер селекторів, напрочуд показова річ. Трохи покопавшись, я вирішив використати їхню шпаргалку.

Відразу обмовлюсь, що для початку Вам буде достатньо засвоїти лише перший десяток.

Селектор Приклад Опис CSS
.class .intro Вибирає усі елементи з class=”intro” 1
#id #firstname Вибирає усі елементи з id=”firstname” 1
* * Просто вибирає усі елементи 🙂 2
element p Вибирає елементи з тегом <p> 1
element,element div, p Вибирає елементи з тегом <div> та усі <p> елементи 1
element element div p Вибирає усі елементи <p>, які є всередині <div> елементів 1
element>element div > p Вибирає усі елементи <p> безпосереднім материнським елементом яких є <div> елемент 2
element+element div + p Вибирає першого сусіда <p> який розташовані відразу після <div> на тому ж рівні вкладеності 2
element1~element2 p ~ ul Вибирає усі сусідні списки <ul>, котрі йдуть після <p> елементів на тому ж рівні вкладеності 3
[attribute] [target] Вибирає усі елементи, які мають target атрибут 2
[attribute=value] [target=_blank] Вибирає усі елементи, в яких атрибут дорівнює конкретному значенню, наприклад: target=”_blank” 2
[attribute~=value] [title~=порося] Вибирає усі елементи, в яких атрибут title містить слово порося 2
[attribute|=value] [lang|=en] |= — означає, що параметр має вже не просто містити, а починатись з en 2
[attribute^=value] a[href^=”https”] Вибирає кожен елемент <a> в якого атрибут href починається з “https” 3
[attribute$=value] a[href$=”.pdf”] Протилежна властивість — тут вибирається кожен елемент, атрибут href якого закінчується на “.pdf” 3
[attribute*=value] a[href*=”intech”] Вибирає усі елементи <a>, в яких атрибут містить
“intech”
3
:active a:active Вибирає всі активні лінки 1
::after p::after Вставляє певний контент після кожного елементу з тегом <p> 2
::before p::before Вставляє певний контент перед кожним елементом з тегом  <p> 2
:checked input:checked Вибирає усі checked <input> (вирані галочками) 3
:disabled input:disabled Вибирає всі “зняті” <input> 3
:empty p:empty Вибирає кожен пустий <p>, тобто без дочірніх блоків та тексту 3
:enabled input:enabled Вибирає кожен “включений”<input> 3
:first-child p:first-child Вибирає перший <p>в заданому рівні вкладення 2
::first-letter p::first-letter Вибирає першу букву кожного <p> 1
::first-line p::first-line Кожна перша лінія елементів з тегом <p> 1
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent 3
:focus input:focus Selects the input element which has focus 2
:hover a:hover Selects links on mouse over 1
:in-range input:in-range Selects input elements with a value within a specified range 3
:invalid input:invalid Selects all input elements with an invalid value 3
:lang(language) p:lang(it) Selects every <p> element with a lang attribute equal to “it”
(Italian)
2
:last-child p:last-child Selects every <p> element that is the last child of its parent 3
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent 3
:link a:link Selects all unvisited links 1
:not(selector) :not(p) Selects every element that is not a <p> element 3
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent 3
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting
from the last child
3
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting
from the last child
3
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent 3
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its
parent
3
:only-child p:only-child Selects every <p> element that is the only child of its parent 3
:optional input:optional Selects input elements with no “required” attribute 3
:out-of-range input:out-of-range Selects input elements with a value outside a specified range 3
:read-only input:read-only Selects input elements with the “readonly” attribute specified 3
:read-write input:read-write Selects input elements with the “readonly” attribute NOT specified 3
:required input:required Selects input elements with the “required” attribute specified 3
:root :root Selects the document’s root element 3
::selection ::selection Selects the portion of an element that is selected by a user
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name) 3
:valid input:valid Вибирає усі елементи з валідним значенням value 3
:visited a:visited Вибирає усі відвідані лінки 1

Вкупі з використанням правила @media це дає дуже широкий спектр можливостей.

І звичайно ж не варто обмежуватись лише CSS. Селектори Jquery теж дають чималі можливості в управлінні сторінкою.

2 коментаря для “CSS селектори”

Залишити відповідь