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 теж дають чималі можливості в управлінні сторінкою.
А яка різниця між дією div, span, section? Візуально результат дуже подібний.
Різниця у властивостях. Наприклад,
Ви можете відцентрувати задавши параметри {display: block; width: 70%; margin:auto;} а от у з цим складніше