Знаете ли вы селекторы?

Селекторы class и id

В примере выше мы имеем 3 селектора – это p, div span, ul li. То есть весь наш файл стилей состоит из селекторов и их свойств. Наиболее удобно и наглядно, особенно новичкам, брать за селектор имя класса (class) тега или уникальный идентификатор (id) тега. Чтобы присвоить класс или идентификатор какому-либо тегу, мы должны указать их среди атрибутов этого тега. У конкретного тега может быть максимум 1 идентификатор и бесконечное число классов. Пример:

<div id="first">текст в первом диве</div>
<div class="second">текст во втором диве</div>
<div id="third" class="first second third">текст в третьем диве</div>

На что стоит обратить внимание:

• Классы и идентификаторы можно присваивать любым (всем) тегам.
• Каждый id уникален и не может повторяться в пределах одной страницы, в отличие от классов!
• Один и тот же класс может быть присвоен любым тегам и может повторяться любое количество раз на странице.
• Если мы хотим задать конкретному тегу несколько классов, мы просто задаём их через пробел.
• Имена классов и идентификаторов могут совпадать, при этом кроме имени, ничего общего между ними не будет.

Как обратиться к классу или id в файле стилей (CSS)?

Смотрим пример:

#first {color: red;} /* обращаемся к id с именем first */
.second {color: blue;} /* обращаемся к классу с именем second */
#first .second {color: orange;} /* обращаемся к классу с именем second, ТОЛЬКО если он находится ВНУТРИ тега с идентификатором first */
.first .third {color: grey;} /* обращаемся к классу с именем third, ТОЛЬКО если он находится ВНУТРИ тега с классом first */

В нашем случае последние две инструкции не сработают, так как у нас нет классов, вложенных внутрь тегов с заданными атрибутами. Как вы могли заметить, чтобы обозначить, что мы обращаемся именно к id, нужно перед его именем без пробелов поставить знак решётки (#), если мы обращаемся к классу, то перед именем класса должны поставить точку (.).

Использование классов и идентификаторов очень удобно, но оно увеличивает нашу HTML разметку, в идеале (которого никогда нет) мы вовсе не должны их использовать, вместо них мы будем использовать комбинации и группировки селекторов, о них и будет вся остальная часть статьи, но! Но это совсем не означает, что вы должны полностью отказаться от использования классов и идентификаторов, просто вы должны иметь ввиду, что очень часто вместо создания нового class или id можно обойтись приёмами, описанными ниже и они также могут быть вполне удобны.

В чём различие class и id?

Кроме приведённых выше различий, стоит ещё отметить, что у свойств заданных id приоритет выше, чем у свойств, заданных классу. То есть, если мы напишем:

 <style>
#first {color: red;}
.blue {color: blue;}
</style>
<div id="first" class="blue">текст в диве</div>

То цвет текста станет красным, несмотря на то, что класс находится ниже по коду и если бы у них был равный приоритет текст стал бы синим.

По синтаксису: в случаи с классом мы можем выбрать, у какого именно тега должен находиться данный класс, для этого после имени тега БЕЗ пробела мы должны обратиться к классу. Пример:

.myclass {свойства} /* применятся ко всем тегам, которые содержат класс myclass */
div.myclass {свойства} /* применятся только к тегам div, которые содержат класс myclass */

Для id это тоже будет работать, но такая запись лишена всякого смысла, так как id не может повторяться на странице, а значит достаточно просто объявлять id, без тега к которому оно относится:

<style>
#super {свойства} /* правильно */
div#super {свойства} /* Неправильно, но работать будет */
</style>
<div id="super">текст</div>

Вроде бы осталось только одно неоговорённое отличие, и оно касается темы, которую в ближайшем будущем я не планировал затрагивать на этом блоге – Javascript. Но всё же обязан доложить вам о нём: если вы хотите обратиться к элементу с помощью Javascript, то для этой цели очень удобным будет наличие id у этого элемента. Чтобы обратиться к элементу по его классу в Javascript нет такой встроенной возможности, вам придётся использовать вспомогательные функции + это не всегда кроссбраузерно.

Итог: id и class используем, но в меру, при этом всегда спрашивая себя, а можно ли здесь обойтись без них и насколько это целесообразно.

3) *

CSS селектор всех элементов
. Символ звездочки выбирает все элементы которые есть на странице. Многие разработчики используют его для того, чтобы убрать (обнулить) значения отступов (margin и padding) у всех элементов страницы. Тем не менее, на практике лучше так не делать потому, что этот CSS селектор довольно сильно грузит браузер перебором всех элементов на странице.

Символ * также можно использовать чтобы выделить все дочерние элементы:

#header * {
border: 5px solid grey;
}

В этом примере выделяются все дочерние элементы (потомки) элемента с #header . Но всегда стоит помнить, что этот селектор достаточно тяжел для браузера.

• Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

Слово о каскадах

Фундаментальной чертой CSS является то, что более
чем одна таблица стилей может повлиять на представление документа.
Эта черта известна как каскадность, потому что различные таблицы стилей считаются
идущими сериями. Каскадность является фундаментальной чертой CSS,
потому что мы знаем, что любой документ вполне вероятно может
получить таблицы стилей из многих исотчников: браузера, дизайнера
и, возможно, пользователя.

В последнем наборе примеров вы увидели, что цвет текста ссылок
стал синим без конкретизации таблице стилей. Кроме того, браузерам
известно, как форматировать содержимое тегов blockquote и h1 без явного
указания. Все, что браузер знает о форматировании, хранится в его
таблице стилей по умолчанию и
совмещается с авторскими и пользовательскими таблицами стилей,
когда документ отображается.

Мы годами знали, что дизайнеры хотят проектировать собственные
таблицы стилей. Однако, мы обнаружили, что пользователи тоже хотят
иметь возможность влиять на представление документов. С CSS они
могут сделать это заполняя личную таблицу стилей, которая
совместится с браузерной и дизайнерской таблицами

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

Часть 4. Рекомендации

Ну и конечно-же мои рекомендации. За всю практику верстки у меня накопились некоторые правила, которыми я с радостью поделюсь.

Старайтесь использовать только внешние подключаемые CSS файлы. Внутреннюю стилизацию применяйте только если это необходимо для корректного функционирования веб-сайта;
Старайтесь стилизовать только классы. Не стилизуйте идентификаторы (задаются через id=»решетку» и пишутся через #решетку). Старайтесь меньше стилизовать теги без классов. Например, если вы стилизуете тег h3, а в дальнейшем SEO специалист решит, что заголовок здесь не уместен, обычный div должен иметь такие-же свойства с классом заголовка и отображаться также. Как вариант можно сделать дубликаты HTML тегов в классы, например, .h1, .h2, .h3, .footer, .header, .aside и стилизовать их соответствующим образом;
Старайтесь стилизовать элементы максимально автономно, сокращайте цепочку каскада до одного блока, чтобы было меньше зависимостей от родительских элементов. Это необходимо для максимально эффективного повторного использования блоков на странице и их модификации в других местах верстки. Но без фанатизма. Не стоит задавать отдельные классы каждому тегу в блоке, если не предполагается его автономное использование. Если вы перенесете блок в другое место страницы, он должен отображаться также и не зависеть от родителя. В этом вам поможет использование какой-либо методологии именования классов

Не важно, будет это БЭМ, методология, либо разработанная на основе вашего личного опыта или простые правила, предложенные мной — это лучше, чем называть классы как попало и строить нелогичные и длинные цепочки классов;
Старайтесь называть классы тегов в зависимости от того, какую функцию выполняет блок, а не от того, какое в нем будет содержание. Например, если у вас есть секция с отзывами в виде карусели, не стоит называть селекторы, используя слова reviews, otzivy и т.д

Лучше назвать carousel-once, если планируется выводит по одному пункту карусели на странице. В дальнейшем, возможно вы будете использовать эту карусель не только для оформления отзывов, а задействуете этот код например, для вывода списка коллег компании. В таком случае наименование класса reviews будет несколько неуместным;
Используйте CSS препроцессоры, в этом нет ничего сложного. Мой выбор пал на препроцессор Sass уже довольно давно и я его рекомендую к использованию. У нас есть неплохой урок, в котором я рассказываю как легко пользоваться препроцессором и как он упрощает жизнь: Sass для самых маленьких — подробное руководство;
Используйте сброс стандартных стилей браузера или нормализацию, которая приводит стандартные стили к общему для всех браузеров знаменателю. Я использую в своих проектах Normalize.css, который входит в состав CSS фреймворка Bootstrap;
Когда почувствуете, что выполняете слишком много однообразной работы в процессе верстки — переходите к использованию какого-либо CSS фреймворка или разработайте свой с наиболее часто используемыми элементами, это ускорит вашу работу. Я использую в работе только сетку Bootstrap без стилистического оформления кнопок, панелей и прочих элементов. Этого вполне достаточно для эффективной работы. Хорошая адаптивность Bootstrap сетки по умолчанию также радует;
Самостоятельно экспериментируйте со свойствами. Открывайте CSS справочник и пробуйте. Только так можно наработать опыт, запомнить какое свойство что делает и довести написание стилей документа до автоматизма.

Другие уроки по теме «Верстка»

• Создание сайта портфолио с крутой анимацией | Материалы урока
• Создание красивого сайта с Parallax эффектом при скролле | Материалы урока
• Создание Parallax эффекта на сайте при движении мыши | Материалы урока
• Создание красивого сайта с поддержкой темной темы (HTML, CSS, GSAP) | Материалы урока
• Создание крутого 3D сайта с анимацией прокрутки | Материалы урока
• Создание потрясающей галереи на HTML, CSS и JavaScript | Материалы урока

Все селекторы CSS как на ладони

Различают следующие типы селекторов CSS:

1) универсальные селекторы,

2) селекторы по названию тега,

3) селекторы по классу,

4) селекторы по id,

5) селекторы по атрибуту,

6) селекторы потомков, или контекстные селекторы,

7) селекторы дочерние (только первые),

селекторы сестринские, или соседние (расположенные на одном уровне),

9) селекторы псевдоклассов (селекторы состояния),

10) селекторы псевдоэлементов.

На видеоуроке будет подробно рассмотрен каждый тип селекторов CSS в отдельности

Универсальные селекторы CSS

Универсальные селекторы CSS обозначаются обыкновенной звездочкой «*». Под звездочкой может подразумеваться любой элемент разметки HTML-страницы.

font-size: 16px;

}

CSS селекторы по названию тега

Запись селекторов по тегам также не представляет из себя никакой сложности. Выглядит она следующим образом:

color: red;

}

где h1 — селектор по названию тега.

CSS селекторы по классам

Следующими в нашем списке видов селекторов CSS идут селекторы по классам. Напомним,, что «class» — это атрибут HTML-тега, он очень удобен тем, что может применяться к однотипным элементам. Название класса может быть каким угодно, главное, чтобы оно соответствовало тому элементу, который описывается CSS-правилом. Вообще атрибут «class» считается самым главным инструментом CSS.

При создании CSS-правила точка «.» перед именем класса обязательна.

background-color: #99ffcc;

}

CSS селекторы по id

К атрибутам HTML-тегов относится и id. Атрибут этот применяется к индивидуальному элементу, т.е. элемент с id может быть в единственном экземпляре на странице согласно правилам семантики. В каскадных таблицах стилей атрибуты эти используются крайне редко, их применение к ним вообще не приветствуется, они предназначены в основном для работы с javascript. На всякий случай полезно знать. что селектор по id в CSS-правиле оформляется так:

font-size: 35px;

}

CSS селекторы по атрибутам

Далее будут рассмотрены CSS селекторы по атрибутам HTML-тегов. Их запись также не представляет особой сложности:

color: black;

}

CSS селекторы потомков, или контекстные селекторы

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

padding: 15px;

}

Дочерние селекторы CSS

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

`padding: 15px;

}

Сестринские, или соседние селекторы CSS

При помощи сестринского селектора создается CSS-правило для HTML-элементов, расположенных на одном уровне, причем тот элемент, который записывается как сестринский должен быть самым ближайшим из себе подобных к тому элементу, к которому он записывается в «сестры».

padding-bottom: 30px;

}

CSS селекторы псевдоклассов

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

text-decoration: none;

}

CSS селекторы псевдоэлементов

И последними на сегодняшнем видеоуроке будут рассмотрены CSS селекторы псевдоэлементов. Их прелесть заключается в том, что с их помощью (::before, ::after) можно добавлять различные элементы на веб-странички, но при этом псевдоэлементы никак не будут отражены в HTML-разметке этих страниц. Записываются они по отношению к элементу через двойное двоеточие.

color: red;

}

Мы очень надеемся, что этот урок окажется весьма полезным для вас и послужит стимулом для дальнейшего изучения нашего видеокурса по основам CSS.

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш Loftblog.

Вопросы для проверки

1. Какая специфичность будет у селектора table.forum tr:hover p?

2. Какая специфичность будет у селектора #catalog .col3 .height div?

В больших проектах при разрастании CSS
файлов получается не очень радостная ситуация. Из-за большого количества правил возникает трудность с тем, чтобы определить, какие стили должны быть применены к конкретному элементу. Какие-то стили наследуется, что-то определено через целую цепочку всевозможных селекторов, где-то используется .class
, где-то #id
, а где-то вообще inline-style
.

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

1. Никогда не использовать ID
   селекторы в CSS
   . У них нет никаких преимуществ по сравнению с class
   .
   • Все, что можно сделать с ID
     , можно сделать и с class
     .
   • ID
     не могут быть переиспользованны.
   • Вес ID
     очень большой. Перебить ID
     нельзя даже сотней цепных class-ов
     .
2. Не создавайте излишних селекторов. Если .header-nav {}
   прекрасно работает, то не используйте определение .header .header-nav {}
   . В этом случае ничего не изменится и никакой выгоды от этого не будет.
3. Не конкретизируйте селекторы, пока это действительно не понадобится. Если .nav {}
   работает, то не используйте ul.nav {}
   . Такая запись лишь сократит варианты использования данного класса .nav
   , а так же повысит вес селектора без очевидной пользы.
4. Заставьте себя использовать .class
   , потому что это идеальные селекторы.

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

Это все очень простые правила и следовать им не так-то трудно.

Селекторы

Последнее обновление: 21.04.2016

Определение стиля начинается с селектора. Например:

div{
	width:50px; /* ширина */
	height:50px; /* высота */
	background-color:red; /* цвет фона */
	margin: 10px; /* отступ от других элементов */
}

В данном случае селектором является . Ряд селекторов наследуют название форматируемых элементов, например, div, p, h2 и т. д.
При определении такого селектора его стиль будет применяться ко всем элементам соответствующих данному селектору. То есть выше определенный стиль будет
применяться ко всем элементам на веб-странице:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Селекторы CSS</title>
		<style>
			div{
				width:50px;
				height:50px;
				background-color:red;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<h2>Селекторы CSS</h2>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

Здесь на странице 3 элемента div, и все они будут стилизованы:

Классы

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

Для определения селектора класса в CSS перед названием класса ставится точка:

.redBlock{
	background-color:red;
}

Название класса может быть произвольным. Например, в данном случае название класса — «redBlock». Однако при этом в имени класса разрешается использовать буквы, числа, дефисы и знаки подчеркивания,
причем начинать название класса должно обязательно с буквы.

Также стоит учитывать регистр имен: названия «article» и «ARTICLE» будут представлять разные классы.

После определения класса мы можем его применить к элементу с помощью атрибута class. Например:

<div class="redBlock"></div>

Определим и используем несколько классов:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Классы CSS</title>
		<style>
			div{
				width: 50px;
				height: 50px;
				margin: 10px;
			}
			.redBlock{
				background-color: red;
			}
			.blueBlock{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<h2>Классы CSS</h2>
		<div class="redBlock"></div>
		<div class="blueBlock"></div>
		<div class="redBlock"></div>
	</body>
</html>

Идентификаторы

Для идентификации уникальных на веб-станице элементов используются идентификаторы, которые определяются с помощью атрибутов id. Например, на странице
может быть головной блок или шапка:

<div id="header"></div>

Определение стилей для идентификаторов аналогично определению классов, только вместо точки ставится символ решетки #:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Идентификаторы CSS</title>
		<style>
			div{
				margin: 10px;
				border: 1px solid #222;
			}
			#header{
				height: 80px;
				background-color: #ccc;
			}
			#content{
				height: 180px;
				background-color: #eee;
			}
			#footer{
				height: 80px;
				background-color: #ccc;
			}
		</style>
	</head>
	<body>
		<div id="header">Шапка сайта</div>
		<div id="content">Основное содержимое</div>
		<div id="footer">Футер</div>
	</body>
</html>

Однако стоит заметить, что идентификаторы в большей степени относятся к структуре веб-странице и в меньшей степени к стилизации. Для стилизации
преимущественно используются классы, нежели идентификаторы.

Универсальный селектор

Кроме селекторов тегов, классов и идентификаторов в css также есть так называемый универсальный селектор,
который представляет знак звездочки (*). Он применяет стили ко всем элементам на html-странице:

*{		
	background-color: red;
}

Стилизация группы селекторов

Иногда определенные стили применяются к целому ряду селекторов. Например, мы хотим применить ко всем заголовкам подчеркивание. В этом случае
мы можем перечислить селекторы всех элементов через запятую:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Селекторы CSS</title>
		<style>
			h1, h2, h3, h4{
				
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>CSS3<h1>
		<h2>Селекторы</h2>
		<h3>Группа селекторов</h3>
		<p>Некоторый текст...</p>
	</body>
</html>

Группа селекторов может содержать как селекторы тегов, так и селекторы классов и идентификаторов, например:

h1, #header, .redBlock{
				
	color: red;
}

НазадВперед

Часть 1

Уневарсальный селектор

CSS предоставляет универсальный селектор для выборки всех тегов веб-страницы. Например, если вы хотите, чтобы все отображалось полужирным шрифтом, нужно добавить следующий код:

a, p, img, h1, h2, h3, h4, h5 ...... {
    font-weight: bold;
}
				

Использование символа — более быстрый способ сообщить CSS о выборке всех HTML-тегов веб-страницы:

* { font-weight: bold; }
				

Кроме того, вы можете задействовать универсальный селектор в составе селектора потомков: применяете стиль ко всем тегам-потомкам, подчиненным определенному элементу веб-страницы. Например, выбирает все теги внутри элемента, имеющего атрибут со значением .

.E * {
   ....
}
				

Идентификаторы и классы

Идентификатор (называемый также «ID селектор») определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты.

#E {
    style: properties;
}
				

При описании идентификатора вначале указывается символ решётки (#), затем идет имя идентификатора. Оно должно начинаться с латинского символа и может содержать в себе символ дефиса (-) и подчеркивания (_).

Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега.

E.class {
    style: properties;
}

.class {
    style: properties;
}
				

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

Пользовательское имя класса начинается с точки. Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчеркивания (_).

Контекстные селекторы или селекторы потомка

При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определённом контексте. Например, задать стиль для тега только когда он располагается внутри контейнера . Таким образом можно одновременно установить стиль для отдельного тега, а также для тега, который находится внутри другого.

p b {
    font-weight: 600;
}
				

Потомок не обязательно должен идти сразу после предка в дереве документа, вроде отношения родитель-ребёнок, но может находиться в любом месте внутри предка. Селекторы потомка создаются пробелом между отдельными элементами в селекторе, создавая новый уровень иерархии для каждого элемента списка.

article p {
    color: #f0b;
}
				

Прямой дочерние селекторы

Порой селекторы потомка заходят слишком далеко, выбирая больше, чем хотелось бы. Иногда должны быть выбраны только прямые дети родительского элемента, а не каждый экземпляр элемента вложенный глубоко внутри предка. В этом случае может быть использован прямой дочерний селектор путём размещения знака больше (>) между родительским и дочерним элементом в селекторе.

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

article > p {
    opacity: 0.5;
}
				

Соседние селекторы

Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа. Рассмотрим несколько примеров отношения элементов.

<p>Lorem ipsum <b>dolor</b> sit amet.</p>
				

В этом примере тег является дочерним по отношению к тегу , поскольку он находится внутри этого контейнера. Соответственно выступает в качестве родителя .

<p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>
				

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

, никак не влияет на их отношение.

<p>Lorem <b>ipsum</b> dolor sit amet, <var>consectetuer</var> adipiscing <i>elit</i>.</p>
				

Соседними здесь являются теги и , а также и . При этом и к соседним элементам не относятся из-за того, что между ними расположен контейнер .

Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами. Общий синтаксис следующий.

selector1 + selector2 {
    style: properties;
}
				

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

Фильтр по месту среди соседей

При выборе элемента можно указать его место среди соседей.

Список псевдоклассов для этого:

• – первый потомок своего родителя.

• – последний потомок своего родителя.

• – единственный потомок своего родителя, соседних элементов нет.

• – потомок номер своего родителя, например – второй потомок. Нумерация начинается с .

• – расширение предыдущего селектора через указание номера потомка формулой, где – константы, а под подразумевается любое целое число.

  Этот псевдокласс будет фильтровать все элементы, которые попадают под формулу при каком-либо . Например:
  — даст элементы номер , , …, то есть чётные.

  • даст элементы номер , …, то есть нечётные.
  • даст элементы номер , , и так далее.

Пример использования для выделения в списке:

:nth-last-child(a), :nth-last-child(an+b) – то же самое, но отсчёт начинается с конца, например :nth-last-child(2) – второй элемент с конца.

Селекторы по атрибутам в CSS

В CSS существует возможность обратиться к элементам html-документа по значению его атрибутов. Вы, конечно, уже знаете про ID и классы. Давайте взглянем на следующий html:

У этого элемента три атрибута: id, class и rel. Обратиться к этому элементу в CSS вы можете либо по его идентификатору (#first-title), либо по имени класса (.magical). Однако знали ли вы, что вы также можете обратиться к нему, используя атрибут rel? Это и называется селекторы по атрибутам:

Существует множество вариантов их использования. Давайте разберёмся более детально с различными опциями и попытаемся придумать сценарии использования атрибутов в реальной жизни.

Атрибут точно соответствует заданному значению

В приведённом выше примере, атрибут элемента h2 был равен «friend». Селектор, который мы написали ссылался на него, поскольку значение атрибута точно равно «friend». Именно точное. Давайте посмотрим на другой пример:

Более реальный пример — стилизация блогролла (blogroll). Скажем у вас есть список ссылок на дружественные сайты:

И вы хотите задать каждой ссылке свой стиль. Традиционный подход состоит в том, что каждой ссылке указывается класс, но этот подход требует дополнительной разметки. Другой способ — это использование псевдоселектора nth-child. Однако этот подход требует определённого порядка элементов. Эта проблема идеально подходит для применения селекторов по атрибутам, поскольку ссылки уже являются уникальными.

Я уверен, что наиболее часто этот тип селектора используется для элементов input (text, radio и т.п.). Все эти элементы сильно отличаются друг от друга, и писать что-нибудь типа input { padding: 10px; } в большинстве случаев не лучшая идея. Гораздо чаще используется следующая запись:

Это единственный способ стилизовать элементы input без дополнительной разметки и всяческих ухищрений.

Атрибут содержит заданное значение.

Теперь начинаются более интересные вещи. Знаку равенства в селекторе по атрибуту может предшествовать другой знак, который меняет назначение его использования. Например, «*=» означает «заданное значение может находиться где угодно в значении указанного атрибута». Взгляните на следующий пример:

Не забывайте, что идентификаторы и классы — это тоже атрибуты и вы можете их в селекторах по атрибутам. Итак, давайте предположим, что вы пишете CSS для сайта, в котором вы не имеете доступа к разметке, а неопытный разработчик оставил вам такое:

Вы можете подсветить все эти элементы следующим образом:

Атрибут начинается с заданного значения

Пример из жизни может быть такой: скажем вам необходимо подсветить ссылки на дружественный вам сайт отличным от остальных ссылок цветом

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

Атрибут заканчивается на заданное значение

Если есть возможность сделать выбор по началу значения атрибута, то почему не быть и обратной возможности?

Честно говоря, я не смог найти реального примера применения такого вида селектора. Но я верю что он существует. Предположим, что вам необходимо подсветить ссылки, которые заканчиваются не значимыми символами:

Атрибут находится в списке, разделённом пробелами

Как вы уже знаете, вы можете указать несколько классов стилей для одного элемента. И если вы делаете именно так, то вы можете использовать имя класса для доступа к элементу в CSS. В случае использования селекторов по атрибуту, не всё так просто. Если атрибуту rel присвоено несколько значений (разделённых пробелами), то вам необходимо использовать «~=»;

Вы можете подумать, почему бы нам не использовать в этом случае «*=» ? Действительно, такой вариант использования более гибок, однако он может быть слишком гибок. Рассматриваемый селектор требует, чтобы значение отделялось пробелом, а «*=» — нет. Таким образом, если у вас есть два элемента (один с rel=home friend-link, а второй с rel=home friend link), то вам необходимо использовать селектор для случая с пробелами, чтобы выбрать только второй элемент.

Атрибут находится в списке, разделённом дефисами

Список, разделённый дефисами очень похож на описанный выше список разделённый пробелами. Но опять же есть свои особенности перед использованием селектора с «*=».

Соответствие по нескольким атрибутам

Очень важно, что для выборки элементов есть возможность использовать сразу несколько селекторов по атрибутам. Каждый пример, приведённый выше, работает во всех современных браузерах: Safari, Chrome, Firefox, Opera и IE7 и выше

Каждый пример, приведённый выше, работает во всех современных браузерах: Safari, Chrome, Firefox, Opera и IE7 и выше.