В данной статье речь пойдет про CSS-селекторы. Будут рассмотрены как старые CSS-селекторы, которые поддерживает даже IE6, так и совсем новые CSS3-селекторы, которые поддерживают только последние версии браузеров. Итак, начнем.
1. *
* { margin: 0; padding: 0; }
Начнем с самого простого, а потом уже перейдем к более продвинутым вещам.
Этот CSS-селектор выделяет каждый элемент на странице. Многие разработчики используют его для того, чтобы скинуть у всех элементов значения margin и padding. На первый взгляд это удобно, но все-таки в рабочем коде так лучше не делать. Этот CSS-селектор слишком сильно грузит броузер.
* также можно использовать для выделения дочерних элементов.
#container * { border: 1px solid black; }
В данном случае выделяться все дочерние элементы #container. Опять же, старайтесь не злоупотреблять им.
Совместимость
- IE6 +
- Firefox
- Chrome
- Safari
- Opera
2. #X
container { width: 960px; margin: auto; }
Знак решетки перед CSS-селектором Х выделит нам элемент с id = Х. Это очень просто, но будьте аккуратны при использовании id.
Спросите себя: мне абсолютно необходимо выделение по id?
id жестко привязывают стиль к элементу и не дает возможности повторного использования. Более предпочтительным будет использование классов, названий тэгов или даже псевдо-классов.
Совместимость
- IE6 +
- Firefox
- Chrome
- Safari
- Opera
3 .Х
error { color: red; }
Это CSS-селектор класса Х. Разница между id и классом заключается в том, что одному классу может принадлежать несколько элементов на странице. Используйте классы, когда вы хотите применить стиль к нескольким однотипным элементам. При использовании id вам придется писать стиль для каждого отдельного элемента.
Совместимость
- IE6 +
- Firefox
- Chrome
- Safari
- Chrome
4. Х Y
li a { text-decoration: none; }
CSS-селектор дочерних элементов встречается чаще всего. Если вам надо выделить элементы определенного типа из множества дочерних элементов, используете этот селектор. Например, вам надо выделить все ссылки, которые находятся в элементе li. В этом случае используйте этот селектор.
Не следует делать CSS-селекторы вида Х Y Z A B.error. Всегда спрашивайте себя, а обязательно ли для выделения данного элемента писать такой громоздкий CSS-селектор.
Совместимость
- IE6 +
- Firefox
- Chrome
- Safari
- Chrome
5. X
a { color: red; } ul { margin-left: 0; }
Что делать, если вы хотите, чтобы охватить все элементы данного типа на странице? Будьте проще, используйте CSS-селектор типа. Если вы должны выделить все неупорядоченные списки, используйте ul {} .
Совместимость
- IE6 +
- Firefox
- Chrome
- Safari
- Opera
6. X:visited and X:link
a:link { color: red; } a:visted { color: purple; }
Мы используем псевдо-класс :link, для выделения всех ссылок, на которые еще не кликнули.
Если же нам надо применить определенный стиль у уже посещенным ссылкам, то используем псевдо-класс :visited.
Совместимость
- IE7 +
- Firefox
- Chrome
- Safari
- Opera
7. Х+Y
ul + p { color: red; }
Выделяет последующий элемент. Он будет выбирать только элемент типа Y, который идет сразу после элемента Х. В примере текст первого абзаца после каждого ul будет красного цвета.
Совместимость
- IE7 +
- Firefox
- Chrome
- Safari
- Chrome
8. Х>Y
div#container > ul { border: 1px solid black; }
Разница между стандартными Х Y и X > Y состоит в том, что рассматриваемый CSS-селектор будет выбирать только непосредственные дочерние элементы. Например, рассмотрим следующий код.
<div id="container"> <ul> <li> Элемент списка <ul> <li> Дочерний элемент</li> </ul> </li> <li> Элемент списка </li> <li> Элемент списка </li> <li> Элемент списка </li> </ul> </div>
CSS-селектор #container > ul выберет только ul-ы, которые являются непосредственными дочерними элементами div с id =container . Он не выберет, например, ul-ы, являющиеся дочерними элементами первых li .
Поэтому можно получить выигрыш в производительности используя данный CSS-селектор. В самом деле, это особенно рекомендуется при работе с jQuery или другими библиотеками, выбирающими элементы на основе правил CSS -селекторов.
Совместимость
- IE7 +
- Firefox
- Chrome
- Safari
- Opera
9. Х ~ Y
ul ~ p { color: red; }
Этот CSS-селектор очень похож на X + Y, однако, является менее строгим. При использовании ul + p будет выбрать только первый элемент, идущий за Х. В данном случае будут выбраны все элементы p, идущие за ul.
Совместимость
- IE7 +
- Firefox
- Chrome
- Safari
- Opera
10. X[title]
a[title] { color: green; }
В CSS-селекторах также можно использовать атрибуты. Например в данном примере мы выделили все ссылки, имеющие атрибут титле. Остальные ссылки останутся не затронутыми.
Совместимость
- IE7 +
- Firefox
- Chrome
- Safari
- Opera
11. X [href="Foo"]
a[href="https://everstudent .ru"] { color: #ffde00; }
Все ссылки, которые ссылаются на everstudent.ru будут золотыми. Все остальные ссылки останутся неизменными неизменным.
Обратите внимание, что на кавычки. Не забудьте так же делать в jQuery и других JavaScript библиотеках, в которых элементы выбираются по CSS-селекторам. По возможности, всегда используйте CSS3 CSS-селекторы.
Хорошее правило, но слишком строгое. Что же делать, если ссылка ведет не непосредственно на everstudent.ru, а например на https://everstudent.ru/portfolio ? В этих случаях мы можем использовать регулярные выражения.
Совместимость
- IE7 +
- Firefox
- Chrome
- Safari
- Chrome
12. X [HREF *= "everstudent.ru"]
a[href*="everstudent"] { color: # 1f6053; }
Вот то, что нам нужно. Звезда обозначает, что искомое значение должно появляться где-нибудь в атрибуте. Таким образом, CSS-селектор охватывает everstudent.ru, https://everstudent.ru/portfolio и т.д.
Но что делать, если ссылка ведет на какой-то сторонних и не связанный ресурс, в адресе которого присутствует everstudent? Тогда нужно использовать "^"или "&", для ссылки на начало и конец строки соответственно.
Совместимость
- IE7 +
- Firefox
- Chrome
- Safari
- Opera
13. X[href^="http"]
a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; }
Вы никогда не задумывались, как некоторые веб-сайты могут отображать маленький значок рядом с внешними ссылками? Я уверен, что вы видели их прежде, они хорошо запоминаются.
"^" - наиболее часто используемый в регулярных выражениях символ. Он используется для обозначения начала строки. Если мы хотим охватить все тэги, у которых href начинается с http, нам надо использовать CSS-селектор, приведенных выше.
Обратите внимание, что мы не ищем "https://". Это не правильно, поскольку не учитываются адреса, начинающиеся с https://
А если мы хотим задать стиль только для ссылок, ведущих на фотографию? Нужно искать конец строки.
Совместимость
- IE7 +
- Firefox
- Хром
- Safari
- Опера
14. X [href$=". JPG"]
a[href$=".jpg"] { color: red; }
Опять же, мы используем символ регулярного выражения "$" для обозначения конца строки. В данном мы ищем ссылки, которые ссылаются на jpg-файлы, или url-ы, в конце у которых стоит ".jpg".
Совместимость
- IE7 +
- Firefox
- Хром
- Safari
- Опера
15. X[data-*="foo"]
a[data-filetype="image"]{ color: red; }
Как же нам теперь написать CSS-селектор, который бы выделял ссылки на все виды изображений? Например, мы могли бы написать так:
a[href$=".JPG"], a[href$=". JPEG"], a[href$=".PNG"], a[href$=".GIF"] { color: red; }
Но это геморрой и неэффективно. Другим возможным решением является применение пользовательских атрибутов. Почему бы нам не добавить наш собственный атрибут data-filetype в каждую ссылку?
<a href="path/to/image.jpg" data-filetype="image"> Ссылка на изображение </a>
Теперь мы можем выделить такие ссылки при помощи данного CSS-селектора:
a[data-filetype="image"] { color: red; }
Совместимость
- IE7 +
- Firefox
- Хром
- Safari
- Опера
16. X[foo~="bar"]
a[data-info~="external"] { color: red; } a[data-info~="image"] { border: 1px solid black; }
А вот кое-что особенное. Не все знают об этом CSS-селекторе. Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных запятой.
Например, мы можем задать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Так, мы можем указать, что ссылка является внешней и что она ссылается на изображение.
"<a href="path/to/image.jpg" data-info="external image"> Click Me </a>
Вот, Html-код на месте, теперь напишем стили.
/ * Выбираем ссылки с атрибутом data-info, содержащий значение "external" * / a[data-info~="external"] { color: red; } / * И которые содержат значения "image" * / a[data-info~="image"] { border: 1px solid black; }
Неплохо, да?
Совместимость
- IE7 +
- Firefox
- Хром
- Safari
- Опера
17. X:checked
input[type=radio]:checked { border:1px solid black; }
Этот псевдокласс выделяет только элементы пользовательского интерфейса, такие как переключатель или флажок. Причем те, которые отмечены/выбраны. Очень просто.
Совместимость
- IE9 +
- Firefox
- Хром
- Safari
- Опера
18. X:after
Псевдоклассы :before и :after очень крутые. Создается впечатление, что каждый день появляются новые способы их эффективного использования. Они просто генерируют контент вокруг выбранного элемента.
Многие познакомились с этими псевдоклассами при работе с clear-fix hack.
.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; }
Этот хак использует :after чтобы добавить пробел после элемента, а запретить его обтекание.
Согласно спецификации CSS3, вы должны использовать два двоеточия (::). Однако, можно использовать и одно двоеточие для совместимости.
Совместимость
- IE8 +
- Firefox
- Хром
- Safari
- Опера
19. X:hover
div:hover { background: #e3e3e3; }
Хотите применить стиль к элементу, когда наводите на него мышкой? Тогда этот CSS-селектор для вас.
Имейте в виду, что старые версии Internet Explorer применяют :hover только к ссылкам.
Этот CSS-селектор часто используют для того, чтобы поставить border-bottom на ссылки, когда на них наводят мышкой.
a:hover { border-bottom: 1px solid black; }
border-bottom: 1px solid black; выглядит лучше, чемtext-decoration: underline;
Совместимость
- IE6 + (В IE6: hover должен быть применен к ссылке)
- Firefox
- Хром
- Safari
- Опера
20. X:not(selector)
div:not(#container) { color: blue; }
Псевдокласс отрицания бывает очень полезным. Скажем, я хочу выбрать все div, за исключением того, который имеет id = container . Приведенный выше код справиться с этим!
Или, если бы я хотел выбрать все элементы, за исключением p.
*:not(p) { color: green; }
Совместимость
- IE9 +
- Firefox
- Хром
- Safari
- Опера
21. X::псевдо элемент
p::first-line { font-weight: bold; font-size: 1.2em; }
Мы можем использовать псевдо элементы, чтобы оформлять фрагменты элементов, такие как первая строка, или первая буква. Имейте в виду, что они должны быть применены к элементам уровня блока для того, чтобы вступили в силу.
Псевдо-элемент задается двумя двоеточиями: ::
Выбираем первую букву в параграфе
p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right:2px; }
Этот код выберет все параграфы, и в них в свою очередь выберет первые буквы и применит к ним этот стиль.
Выбираем первую строку в абзаце
p::first-line { font-weight: bold; font-size: 1.2em; }
Аналогичным образом благодаря ::first-line мы задаем стиль первой строки в абзаце.
"Для совместимости с существующими таблицами стилей, браузер должен понимать прежнее обозначения псевдо элементов с одним двоеточием, введенные в CSS 1, 2 (:first-line, :first-letter, :before and :after). Эта совместимость не допускается для новых псевдо-элементов, введенных в этой спецификации" Источник
Совместимость
- IE6 +
- Firefox
- Хром
- Safari
- Опера
22. X:nth-child(n)
li:nth-child(3) { color: red; }
Раньше мы не могли выделить, например, третий дочерний элемент? nth-child решает это!
Обратите внимание, что nth-child принимает целое число в качестве параметра, однако отсчет ведется не с 0. Если вы хотите выбрать второй пункт списка, используйте li:nth-child(2) .
Мы даже можем выбрать каждый четвертый элемент списка, просто написав {0}li:nth-child(4n){/0}.
Совместимость
- IE9 +
- Firefox 3,5 +
- Хром
- Safari
23. X:nth-last-child(n)
li:nth-last-child(2) { color: red; }
Что делать, если у вас огромный список элементов в ul , а нем нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(397), можно использовать nth-last-child.
Этот метод почти идентичен приведенному выше, однако отсчет ведется с конца.
Совместимость
- IE9 +
- Firefox 3,5 +
- Хром
- Safari
- Опера
24. X:nth-of-type(n)
ul:nth-of-type(3) { border: 1px solid black; }
Бывает, что надо выбрать не дочерний элемент, а элемент определенного типа.
Представьте себе, что на странице пять неупорядоченных списков. . Если вы хотите применить стиль только к третьему ul, не имеющему уникального id, нужно использовать nth-of-type.
Совместимость
- IE9 +
- Firefox 3,5 +
- Хром
- Safari
25. X:nth-last-of-type(n)
ul:nth-last-of-type(3) { border: 1px solid black; }
Мы можем также использовать nth-last-of-type, отсчитывая элементы с конца.
Совместимость
- IE9 +
- Firefox 3,5 +
- Хром
- Safari
- Опера
26. X:first-child
ul li:first-child { border-top: none; }
Этот псевдокласс выбирает первый дочерний элемент. Часто используется чтобы убрать border в первом и последнем элементе списка.
Совместимость
- IE7 +
- Firefox
- Хром
- Safari
- Опера
27. X:last-child
ul > li:last-child { color: green; }
В противоположность :first-child :last-child выбирает последний дочерний элемент.
Совместимость
- IE9 + (Да да, IE8 поддерживает :first-child , но не поддерживает :last-child. Microsoft-у привет! )
- Firefox
- Хром
- Safari
- Опера
28. X:only-child
div p:only-child { color: red; }
Вы не часто встретите этот псевдокласс, тем не менее он существует.
Он позволяет вам выбрать элементы, которые являются единственными дочерними. Например, применим приведенный выше стиль к этому html-коду:
<div> <p> Один параграф.</p> </div> <div> <p> Два параграфа </p> <p> Два параграфа </p> </div>
Будет выбран p только первого div`a, потому что он единственный дочерний элемент.
Совместимость
- IE9 +
- Firefox
- Хром
- Safari
- Опера
29. X:only-of-type
li:only-of-type { font-weight: bold; }
Очень интересный псевдокласс. Он затрагивает элементы, не имеющие соседей в пределах родительского элемента. В качестве примера выберем ul только с одним элементом в списке.
Единственное решение заключается в использовании only-of-type .
ul > li:only-of-type { font-weight: bold; }
Совместимость
- IE9 +
- Firefox 3,5 +
- Хром
- Safari
- Опера
30. X:first-of-type
first-of-type выбирает первый элемент заданного типа.
Чтобы лучше понять, приведем
пример.
<div> <p> Параграф </p> <ul> <li> Пункт 1 </li> <li> Пункт 2 </li> </ul> <ul> <li> Пункт 3 </li> <li> Пункт 4 </li> </ul> <div>
А теперь попытайтесь понять как выделить пункт 2.
Решение 1
ul:first-of-type > li:nth-child(2) { font-weight: bold; }
Решение 2
p + ul li:last-child { font-weight: bold; }
Решение 3
ul:first-of-type li:nth-last-child(1) { font-weight: bold; }
Совместимость
- IE9 +
- Firefox 3,5 +
- Хром
- Safari
- Опера
Источник статьи: https://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
а не гемморой ли - в каждую картинку вставлять data-filetype,
вместо того, чтобы один раз в css прописать стиль для jpe, gif, png ?
Возьму на вооружение, не знал что можно настолько сложные составлять и уж тем более regexp можно было бы применять.
В основном использовал копипаст для более сложного оформления форм, типа input[type="text"], не зная что это регулярка.
Это ж получается, что в квадратных скобках [] можно сотворить что угодно?!
Спасибо!
Чтобы выполнить второе условие, то тут только или с помощью JS или с помощью вложенности элементов.
Обычно пять ссылок в столбик правильнее реализовывать через списки, в вашем случае через вложенные списки
первая ссылка
вторая и последующие ссылки
вторая и последующие ссылки
Таким образом к первой ссылке обращение будет
ul li a {}
к остальным
ul li li a {}
Только надо помнить, что "вторые" ссылки будут так же унаследовать свойства первой ссылки.
Вот похожий пример
https://demo.g63.ru/table_hover.html
Давно его делал. Там (в коде) есть полный ответ на ваш вопрос.
<ul>
<li>
<a href="">первая ссылка</a>
<ul>
<li>
<a href="">вторая и последующие ссылки</a>
<a href="">вторая и последующие ссылки</a>
</li>
</ul>
</li>
</ul>