CSS селекторы

Это работает неплохо, хотя и немного непреклонно. А что если ссылка ведет на сайт dnzl.ru, но в url присутствует еще и уточняющие слова (например: post, view_cat и т.д.)? Как выделить все ссылки, в которых присутствует слово dnzl? В этом случае нам понадобится применить другой синтаксис.

12. X[href*="dnzl"]

CSS

a[href*="dnzl"] {  
      color: #1f6053; /* nettuts green */  
    }

То, что нам нужно. Здесь с помощью звездочки мы выбираем все теги a, атрибут href которых имеет слово dnzl. Это и dnzl.ru, и dnzl.ru/view_post.php и т.д.

13. X[href^=http://]

CSS

a[href^="http"] {  
       background: url(path/to/external/icon.png) no-repeat;  
       padding-left: 10px;  
    }

Когда-нибудь задавались вопросом - как некоторые сайты показывают иконку перед ссылкой? Я уверен вы с этим сталкивались; иконка показывает, что ссылка ведет на совершенно другой сайт.

Это происходит благодаря символам ^=. Данные символы означают ‛начинается на". То есть, если вы захотите выбрать все якорные теги, которые начинаются с http://, вы можете использовать селектор показанный выше.

Но что если мы хотим задать стиль всем якорным тегам, которые отсылают нас к фото?

14. X[href$=".jpg"]

CSS

a[href$=".jpg"] {  
       color: red;  
    }

Селектор знак доллара означает ‛заканчивается на". В нашем примере, мы указываем на все якорные теги, у которых url заканчивается на .jpg. Имейте в виду, что данное объявление не будет, конечно, работать с png или gif.

15. X[data-*="foo"]

CSS

a[data-filetype="image"] {  
       color: red;  
    }

Но все же. Как нам описать селектор, затрагивающий все форматы изображений? Мы можем создать групповой селектор, например:

CSS

a[href$=".jpg"],  
a[href$=".jpeg"],  
a[href$=".png"],  
a[href$=".gif"] {  
   color: red;  
}

Но так поступать не целесообразно. Другое возможное решение - использовать обычный атрибут. Что если мы добавим свой собственный атрибут data-filetype каждому тегу a, который ссылается на изображение?

HTML

<a href="path/to/image.jpg" data-filetype="image">   Image Link </a>

Затем мы можем использовать селектор атрибута, чтобы обозначить все необходимые ссылки.

CSS

a[data-filetype="image"] {  
   color: red;  
}

16. X[foo~="bar"]

CSS

a[data-info~="external"] {  
       color: red;  
    }  
      
    a[data-info~="image"] {  
       border: 1px solid black;  
    }

Не многие люди знают об этой уловке. Символ тильда ~ позволяет нам выбрать атрибут, который имеет разделенный пробелами список значений.

Например, как и в пункте 15 мы можем создать свой атрибут data-info, у которого необходимо через пробел выставить ряд значений. В этом случае, чтобы выделить все внешние ссылки и ссылки на изображения, следует сделать так:

HTML

<a href="path/to/image.jpg" data-info="external image">
Click Me, Fool </a>

CSS

/* выбираем ссылку, где атрибут data-info  содержит слово "external" */a[data-info~="external"] {  
   color: red;  
}  
  
/* и содержит слово "image" */ a[data-info~="image"] {  
  border: 1px solid black;  
}

Псевдоклассы и псевдоэлементы

17. X:checked

Этот псевдокласс выберет все элементы пользовательского интерфейса (такие как переключатель или флажок), которые помечены с помощью атрибута checked.

CSS

input[type=radio]:checked {  
       border: 1px solid black;  
    }

18. X:after

Псевдоэлементы-селекторы :before и :after добавляют сгенерированное содержимое перед элементом и, соответственно, после элемента. Многие узнали о данных классах, когда столкнулись с clear-fix хаком.

CSS

.clearfix:after{  
    content: "";  
    display: block;  
    clear: both;  
    visibility: hidden;  
    font-size: 0;  
    height: 0;  
    }  
  
.clearfix {  
   *display: inline-block;  
   _height: 1%;  
}

Псевдоэлемент-селектор :after добавляет пробел после элемента и запрещает его обтекание.

19. X:hover

CSS

div:hover {  
      background: #e3e3e3;  
    }

Псевдокласс :hover позволяет менять вид ссылки, на которую пользователь навел мышку.

Вы можете добавить, например, нижнюю границу, когда пользователь навел указатель мышки на ссылку.

CSS

a:hover {  
     border-bottom: 1px solid black;  
    }

20. X:not(selector)

CSS

div:not(#container) {  
       color: blue;  
    }

Псевдокласс отрицания особенно полезен. Скажем, я хочу выбрать все блоки div, кроме одного, у которого id равен container. Приведенный выше код справиться с этим.

Или, если я хочу выбрать все элементы кроме параграфа, то:

CSS

*:not(p) {  
      color: green;  
    }

21. X::pseudoElement

CSS

p::first-line {  
   font-weight: bold;  
   font-size: 1.2em;  
}

Мы можем использовать псевдоэлементы, чтобы форматировать определенный фрагмент элемента, например, первую строку (:first-line) или буквицу (:first-letter). Эти псевдоэлементы необходимо применять только к блочным элементам.

CSS

p::first-letter {  
       float: left;  
       font-size: 2em;  
       font-weight: bold;  
       font-family: cursive;  
       padding-right: 2px;  
    }

22. X:nth-child(n)

CSS

li:nth-child(3) {  
       color: red;  
    }

Результат для различных значений псевдокласса :nth-child

n — счетчик, который автоматически принимает значение 0, 1, 2..

Помните дни, когда не могли выделить элемент в стеке? Псевдокласс nth-child решает эту проблему.

Отметьте, что nth-child принимает в качестве значения число, однако это число начинается не с нуля. Если вы хотите выбрать второй элемент списка, применить li:nth-child(2). Чтобы выбрать каждый четвертый элемент списка нужно использовать следующую конструкцию: li:nth-child(4n).

23. X:nth-last-child(n)

CSS

li:nth-last-child(2) {  
   color: red;  
}

Что делать, если у вас большой список, и вам необходимо выбрать третий элемент списка с конца? Вместо конструкции li:nth-child(397), вы можете использовать псевдокласс nth-last-child. Подсчет ведется с конца.

24. X:nth-of-type(n)

CSS

ul:nth-of-type(3) {  
       border: 1px solid black;  
    }

Настанут времена, когда вместо дочернего элемента, вам придется выбрать элемент типа.

Представьте разметку, которая состоит из пяти неупорядоченных списков. Если вы захотите выбрать только третий ul, и не имеете при этом уникальный id, вы вправе применить псевдокласс nth-of-type(n). В коде выше только третий ul имеет границу.

25. X:nth-last-of-type(n)

CSS

ul:nth-last-of-type(3) {  
       border: 1px solid black;  
    }

Мы также можем использовать nth-last-of-type, чтобы начать отсчет с конца списка.

26. X:first-child

CSS

ul li:first-child {  
   border-top: none;  
}

Позволяет оформить только первый дочерний элемент родителя. Очень полезная вещь, особенно для удаления границ у первого и последнего элемента списка.

Например, у вас есть список строк, и каждая имеет border-top и border-bottom. Здесь первый и последний пункт будут выглядеть немного странно.

Вы можете использовать эти псевдоклассы, чтобы обнулить границы.

27. X:last-child

CSS

ul > li:last-child {  
       color: green;  
    }

Данный селектор указывает на последний дочерний элемент тега родителя.

Например, у нас есть неупорядоченный список.

HTML

<ul>  
   <li> List Item </li>  
   <li> List Item </li>  
   <li> List Item </li>  
</ul>

CSS

ul {  
     width: 200px;  
     background: #292929;  
     color: white;  
     list-style: none;  
     padding-left: 0;  
    }  
      
    li {  
     padding: 10px;  
     border-bottom: 1px solid black;  
     border-top: 1px solid #3c3c3c;  
    }

Данный стиль установит фон, удалит padding у тега ul, и назначит границы тегам li (что придаст некоторую глубину).

Одна проблема границы у нижнего и верхнего тега li выглядят нелепо. Чтобы исправить это достаточно применить псевдоклассы :first-child и :last-child.

28. X:only-child

CSS

div p:only-child {  
       color: red;  
    }

Псевдокласс only-child позволяет выбрать только один дочерний элемент тега родителя. Например, касаемо разметки вверху, только одни дочерний параграф элемента div окрасится в красный цвет.

Взгляните на разметку:

HTML

<div><p> My paragraph here. </p></div>  
      <div>  
       <p> Two paragraphs total. </p>  
       <p> Two paragraphs total. </p>  
    </div>

В этом случае параграфы во втором элементе div выбраны не будут; только первый.

29. X:only-of-type

CSS

li:only-of-type {  
       font-weight: bold;  
    }

Псевдокласс only-of-type выберет элементы, которые не имеют сестринских элементов в своем родительском контейнере. Например, давайте выберем все ul, который имеют один элемент списка.

CSS

ul > li:only-of-type {  
       font-weight: bold;  
    }

30. X:first-of-type

Псевдокласс first-of-type позволяет выбирать первые сестринские элементы своего типа.

По материалам статьи the-30-css-selectors-you-must-memorize/