Селектор виділяє кожен елемент на сторінці. Часто використовується для скидання значень елементів значення margin і padding. Вважається, що селектор занадто сильно вантажить браузер, тому варто його уникати.
Можна використовувати для виділення дочірніх елементів.
# (Ідентифікатор)
Знак решітки виділить елемент із зазначеним ідентифікатором id.
CSS-селектор класу. Використовуйте класи, щоб застосувати стиль до кількох однотипним елементам.
Х Y (пропуск)
CSS-селектор дочірніх елементів. Якщо треба вибрати елементи певного типу з безлічі дочірніх елементів, використовуєте цей селектор. Наприклад, вам треба виділити всі посилання, які знаходяться в елементі li.
Уникайте вкладених селекторів типу Y Z A B.block.
селектор тегів
Вибираємо певні теги сторінки.
: Visited і: link (псевдокласи)
Псевдоклас: link служить для виділення всіх посилань, на які ще не скликали. Псевдоклас: visited вибирає вже відвідані посилання.
Виділяє наступний елемент. Він буде вибирати тільки елемент типу Y, який йде відразу після елемента Х. У прикладі текст першого абзацу після кожного ul буде зеленого кольору.
Різниця між стандартними Х Y і X> Y полягає в тому, що даний CSS-селектор буде вибирати тільки безпосередні дочірні елементи.
Селектор #container> ul вибере тільки ul. які є безпосередніми дочірніми елементами div з id = container. Він не вибере, наприклад, ul. є дочірніми елементами перших li.
Селектор схожий на X + Y, однак, є менш суворим. При використанні ul + p можна вибрати тільки перший елемент, що йде за Х. В даному випадку будуть вибрані всі елементи p, що йдуть за ul.
[Title] (атрибути)
Вибираємо все посилання, що мають атрибут title. Решта посилання залишаться не порушеними.
[Href = "Foo"]
Всі номери, які посилаються на вказаний сайт, будуть обрані. Всі інші посилання залишаться незмінними.
Якщо сторінка ведуть не на домен, а на сторінку домена, то можна використовувати регулярні вирази.
X [HREF * = "webmaster.alexanderklimov.ru"]
X [href ^ = "http"]
X [href $ = ". JPG"]
Якщо ми хочемо задати стиль тільки для посилань, що ведуть на фотографію? Потрібно шукати кінець рядка.
Ми використовуємо символ регулярного виразу "$" для позначення кінця рядка. В даному ми шукаємо посилання, які посилаються на jpg-файли, або url-и, в кінці у яких варто ".jpg".
X [data - * = "foo"]
Як же нам тепер написати CSS-селектор, який би виділяв посилання на всі види зображень.
Іншим можливим рішенням є застосування призначених для користувача атрибутів. Додамо власний атрибут data-filetype в кожну посилання.
Тепер ми можемо виділити такі посилання за допомогою даного селектора:
) Дозволяє виділити певний атрибут зі списку атрибутів, розділених комою.
Цей псевдоклас виділяє тільки елементи призначеного для користувача інтерфейсу, такі як перемикач або прапорець. Причому ті, які відзначені / обрані.
Псевдокласи генерують контент навколо обраного елемента.
Багато познайомилися з цими псевдоклас при роботі з clear-fix hack.
Цей хак використовує: after щоб додати пробіл після елемента, і заборонити його обтікання.
Згідно зі специфікацією CSS3, ви повинні використовувати два двокрапки (: :). Однак, можна використовувати і одне двокрапка для сумісності.
Стиль до елементу, коли наводите на нього мишкою.
border-bottom: 1px solid black; виглядає краще, ніж text-decoration: underline;
: Not (selector)
Псевдоклас заперечення буває дуже корисним. Потрібно вибрати всі div, за винятком того, що має id = container.
Можна вибрати всі елементи, за винятком p.
:: псевдоелемент
Ми можемо використовувати псевдоелементи, щоб оформляти фрагменти елементів, такі як перший рядок, або перша буква. Майте на увазі, що вони повинні бути застосовані до елементів рівня блоку для того, щоб вступили в силу.
Псевдоелемент задається двома двокрапкою.
Вибираємо першу букву в параграфі.
Цей код вибере все параграфи, і в них в свою чергу вибере перші літери і застосує до них цей стиль.
Вибираємо перший рядок в абзаці.
Аналогічним чином завдяки. first-line ми задаємо стиль першого рядка в абзаці.
"Для сумісності з існуючими таблицями стилів, браузер повинен розуміти колишнє позначення псевдо елементів з одним двокрапкою, введені в CSS 1, 2 (: first-line. First-letter. Before and: after). Ця сумісність не допускається для нових псевдоелементів, введених в цій специфікації ".
: Nth-child (n)
Можна вибрати третій дочірній елемент. Зверніть увагу, що nth-child приймає ціле число в якості параметра, однак відлік ведеться не з 0. Якщо ви хочете вибрати другий пункт списку, використовуйте li: nth-child (2).
Можна вибрати кожен четвертий елемент списку, просто написавши li: nth-child (4n).
: Nth-last-child (n)
Що робити, якщо у вас величезний список елементів, а ньому потрібно вибрати третій елемент з кінця? Замість того, щоб писати li: nth-child (397), можна використовувати nth-last-child. Цей метод майже ідентичний наведеному вище, однак відлік ведеться з кінця.
: Nth-of-type (n)
Дозволяє вибрати не дочірній елемент, а елемент певного типу. Уявіть собі, що на сторінці п'ять невпорядкованих списків. Якщо ви хочете застосувати стиль лише до третього ul, який не має унікального id, потрібно використовувати nth-of-type.
: Nth-last-of-type (n)
Ми можемо також використовувати nth-last-of-type, відраховуючи елементи з кінця.
: First-child
Цей псевдоклас вибирає перший дочірній елемент. Часто використовується щоб прибрати border в першому і останньому елементі списку.
: Last-child
На противагу: first-child: last-child вибирає останній дочірній елемент.
: Only-child
Дозволяє вибрати елементи, які є єдиними дочірніми. Наприклад, можна застосувати наведений вище стиль до цього html-коду:
Буде обраний p тільки першого div, тому що він єдиний дочірній елемент.
: Only-of-type
Дуже цікавий псевдоклас. Він зачіпає елементи, що не мають сусідів у межах батьківського елемента. Як приклад виберемо ul тільки з одним елементом в списку.
Єдине рішення полягає у використанні only-of-type.
: First-of-type
Вибирає перший елемент заданого типу.
Як виділити пункт 2.