Штирлиц — Сеть печатных салонов в Перми

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

Css класс внутри класса: Цель a css класс внутри другого css класса

Содержание

Селекторы CSS – точечное применение свойств CSS к элементам страницы (тегам)

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

22.04.2013

Здравствуйте дорогие подписчики и не менее дорогие гости Site on! Надеюсь, вам были интересны предыдущие статьи раздела HTML + CSS, потому как сегодня скучать точно не придётся, ведь мы рассмотрим такое понятие как селекторы CSS и как с их помощью мы можем сократить нашу разметку HTML, сделав её чище.

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

p {color: red}
div span {background: green}
ul li {list-style: none}

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

В примере выше мы имеем 3 селектора – это p, div span, ul li. То есть весь наш файл стилей состоит из селекторов и их свойств. Наиболее удобно и наглядно, особенно новичкам, брать за селектор

имя класса (class) тега или уникальный идентификатор (id) тега. Чтобы присвоить класс или идентификатор какому-либо тегу, мы должны указать их среди атрибутов этого тега. У конкретного тега может быть максимум 1 идентификатор и бесконечное число классов. Пример:

<div>текст в первом диве</div>
<div>текст во втором диве</div>
<div>текст в третьем диве</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>текст в диве</div>

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

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

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

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

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

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

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

Родственный селектор

Идём дальше. Из статьи о наследовании в CSS вы уже знаете о двух самых простых видах селекторов, это селектор по тегу (элементу) и по потомку. Давайте освежим вашу память:

 div p {color: green;} /* Селектор по потомку */
p {color: red;} /* селектор по тегу */

Но как я уже писал в предыдущей статье, в первом случае CSS свойства применятся ко всем тегам p вложенным на ЛЮБУЮ глубину тега div. А что если мы хотим применить свойства только к прямым наследникам, то есть к первому уровню вложенности:

<div>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <span>
      <p>Третий уровень</p>
    </span>
  </span>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <p>Второй уровень</p>
  </span>
  <p>Прямой наследник (первый уровень)</p>
</div>

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

div>p {color: blue;} /* только первый уровень вложенности */
div p {color: blue;} /* абсолютно все параграфы внутри div */

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

С этим разобрались, у нас на вооружении уже 3 вида селекторов, теперь хочу вам рассказать о весьма необычном селекторе, который выделяется среди всех остальных – это так называемый универсальный селектор, который обозначается звёздочкой (*):

* {margin: 0; padding: 0;}

Так у меня начинается каждый новый проект, советую вам делать также. Универсальный селектор распространяется на все элементы страницы (теги), но имеет нулевой приоритет (ниже только отсутствие приоритета вовсе). Его обычно используют, чтобы перебить CSS свойства, которые браузеры устанавливают по умолчанию для некоторых тегов. Представьте себе, и такое имеет место быть! Достаточно многим тегам браузеры по умолчанию устанавливают свои свойства, например, тегу гиперссылки <a> синий цвет текста и подчёркивание, тегу body они задают поля (padding) и тд. Нам это запоминать, знать и использовать совсем не к чему, поэтому самые банальные свойства мы сразу же убираем с помощью

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

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

Opera Dragonfly, Firebug и веб-инспекторы в целом, то вам без преувеличений срочно нужно прочесть статью по ссылке выше! А кто уже использовал подобные вещи, прошу дальше за мной.

Псевдо-классы

В отличие от классов, псевдо-классы не нужно указывать в HTML разметке, они сами вычисляются браузером. У нас есть 4 статических псевдо-класса и 3 динамических псевдо-класса, без учёта CSS 3, о нём ближе к концу. К статическим относятся ( :first-child, :link, :visited, : lang() ):

<style>
p:first-child {color: green;} /* сработает, если p является первым ребёнком своего родителя */
</style>
<div>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <span>
      <p>Третий уровень</p>
    </span>
  </span>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <p>Второй уровень</p>
  </span>
  <p>Прямой наследник (первый уровень)</p>
</div>

Результат:

Естественно можно комбинировать селекторы как захотим, например:

div>span p:first-child {color: green;} /*сработает, если p является первым ребёнком своего родителя и находится внутри тега span, который является прямым потомком тега div */

Название представленного выше псевдо-класса говорит само за себя first-child — первый ребёнок.

Следующие два статических псевдо-класса применяются только к тегу гиперссылки (:link, :visited), они применяют CSS свойства в зависимости от того, посещалась данная ссылка конкретным пользователем или нет:

a:link {color: blue;} /* у не посещённых ссылок задаём синий цвет, и по умолчанию они подчёркнуты */
a:visited {color: green; text-decoration: none;} /* у посещённых ссылок текст будет зелёным, убираем подчёркивание */

Псевдо-класс :lang() используется для задания разного стиля оформления в зависимости от языка. В скобочках указывается язык, к которому нужно применить оформление. Это можно использовать, например, для задания разных стилей кавычек в цитатах:

q:lang(de) {quotes: "\201E" "\201C";} /* кавычки для немецкого языка */
q:lang(en) {quotes: "\201C" "\201D";} /* кавычки для английского языка */
q:lang(ru) {quotes: "\00AB" "\00BB";} /* кавычки для русского языка */

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

Динамические псевдо-классы

Динамические псевдо-классы – это :active, :hover, :focus. Динамические псевдо-классы срабатывают по определённому действию на странице, они работают для всех тегов, а не только для ссылок как многие думают и даже утверждают в своих блогах! Рассмотрим их применение:

p:active {background: red;} /* стиль, который применится к тегу по нажатию на него (клику мышью) */
input:focus {width: 400px;} /* стиль, который применится к элементу, на котором в данный момент фокус (работает, к примеру, для текстовых полей ввода: textarea, input). В данном случае по взятию в фокус, ширина input станет равна 400 пикселей, удобно использовать для красивого эффекта удлинения поля по клику. */
div:hover {background: green;} /* срабатывает по наведению курсора на элемент, в основном применяется для создания красивого эффекта при наведении на ссылки. */

Примените данные стили к нашему примеру выше, и вы сами всё увидите.

Смежные селекторы

Смежные селекторы – это ближайший сосед ниже по коду, не ребёнок! Очень удобный селектор:

<style>
div + p {background: green; color: white;} /* Применить свойства к тегу p, если сразу после закрывающегося тега div открывается тег p */
p + span {background: orange;} /* не сработает, так как у нас нет открывающегося тега span, сразу после закрывающегося тега p */
</style>
<div>
  <p>текст в параграфе первого div</p>
</div>
<p>текст в параграфе ВНЕ div</p>
<div>
  <p>текст в параграфе второго div</p>
</div>
<span>текст в спане</span>
<p>снова параграф вне div</p>

Результат:

Обобщённые смежные селекторы

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

<style>
div~p{color: green;}
</style>

<div>текст в диве</div>

<p>параграф</p>
<p>параграф</p>
<p>параграф</p>

<span>текст в спане</span>

<p>параграф</p>
<p>параграф</p>

<div>
<p>параграф в диве</p>
<p>параграф в диве</p>
</div>

<span>текст в спане</span>
<p>параграф</p>

Результат:

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

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

p[align] {свойства} /* применить ко всем тегам p, у которых есть атрибут align */

p[align="center"] {свойства} /* где значение атрибута align равно center */

p[align^="center"] {свойства} /* где значение атрибута align начинается на center */

p[align*="center"] {свойства} /* где значение атрибута align содержит center */

p[class~="site"] {свойства} /* где site может находиться среди других слов, отделенных пробелами (<p></p>) */

p[class|="site"] {свойства} /* где значение атрибута class состоит только из слова site или начинается им, после чего ставится дефис и пишется остальная часть значения (<p></p> или <p></p>) */

p[class$="site"] {свойства} /* где значение атрибута align заканчивается на site */

CSS 3 псевдо-классы

Вы уже ознакомились со всеми основными селекторами и вам на первых парах этого должно хватить с горкой. Однако в CSS 3 появилось множество новых псевдо-классов, теперь мы можем брать не только первого ребёнка, но и любого другого по счёту, можем идти от обратного, брать не первого, а последнего ребёнка и так далее и тому подобное. Всё это очень удобно и практично, разве что у вас могут возникнуть проблемы со старыми версиями IE. Давайте соберём все силы в кулак и пробежимся по всем оставшимся селекторам, чтобы потом уже вы могли иметь их ввиду при вёрстке собственного макета.

:last-child – аналог :first-child, только берёт не первого, а последнего ребёнка.

:only-child – сработает, если элемент (тег) является единственным ребёнком.

:only-of-type — сработает, если элемент (тег) является единственным ребёнком своего типа.

:nth-child() – обращается к потомкам по их порядковым номерам, можно обращаться ко всем чётным или нечётным (even или odd) числам. Например:

<style>
div p:nth-child(5) {background-color: green;} /* Обращаемся к 5 по счёту ребёнку, если он является тегом p. */

div p:nth-child(2n) {background-color: yellow;} /* Обращаемся к каждому второму ребёнку, если он является тегом p. */

div p:nth-child(2n+6) {background-color: red;} /* Обращаемся к каждому второму ребёнку начиная с шестого, если он является тегом p. */
</style>

<div>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>

<span>текст в спане</span>

<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
</div>

Результат:

:nth-last-child – работает также как и предыдущий, но отчёт начинается с конца.

:first-of-type – первый ребёнок своего типа в рамках прямого родителя.

:last-of-type – последний ребёнок своего типа в рамках прямого родителя.

:empty – сработает для тех тегов, внутри которых нет ни одного символа (без текста).

:not() – делает исключение для заданных элементов. Пример:

<style>
p:not(.roll) {color: red;} /* для всех параграфов на странице делаем красный цвет текста, за исключением параграфов с классом roll */
</style>

<p>параграф с классом roll</p>

<p>параграф</p>
<p>параграф</p>

<p>параграф с классом roll</p>

Результат:

Управление полями, формами, переключателями и флажками в CSS

:enabled — применяется к доступным элементам интерфейса как формы, кнопки, переключатели и тд. По умолчанию все элементы интерфейса являются доступными.

:disabled — применяется к заблокированным элементам интерфейса как кнопки, формы и так далее. Элементы интерфейса являются заблокированными, если к ним в HTML добавить атрибут disabled или в XHTML disabled=”disabled”.

:checked – применяется к элементам интерфейса типа переключатели (radio) и флажки (checkbox), когда они находятся во включённом положении.

Псевдо-элементы

Псевдо-элементы, аналогично псевдо-классам вычисляются браузером автоматически, нам об этом заботиться не нужно. Чтобы не путать псевдо-элементы с псевдо-классами в спецификации CSS 3 было решено использовать двойное двоеточие, вместо одинарного, как было в CSS 2. Поэтому в Интернете вы можете встретить псевдо-элементы как с одинарным двоеточием так и с двойным – и тот и тот вариант верен. Однако для лучшей совместимости с IE рекомендуют использовать одинарное двоеточие.

:first-line – первая строка внутри блочного или табличного элемента.

:first-letter – первая буква внутри блочного элемента.

:before и :after – используются чтобы с помощью CSS вставить содержимое до или после элемента, к которому они относятся, лично я ими не пользовался, поэтому сильно расписывать не буду. А как часто вы используете данные псевдо-элементы в своих проектах? Можете поделиться своим опытом в комментариях к данной статье.

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

Преимущества оптимизации HTML за счёт CSS

Суть всего написанного выше отчасти заключается в том, чтобы отказаться от повсеместного использования атрибутов class и id в HTML, тем самым возложив всё на плечи могучих таблиц стилей.

Внешние файлы стилей, как и внешние файлы Javascript отлично кэшируются, а это значит, что зайдя первый раз на любую страницу вашего сайта, браузер пользователя запоминает эти файлы и более их не скачивает, в отличие от самой страницы сайта, то есть вашей HTML разметки, картинок и текста, которую браузер загружает снова и снова. Тоже самое касается и поисковых систем, им вообще нет дела до ваших внешних файлов, но вот до объёма и содержания вашей HTML разметки им дело есть. Поисковым системам приходится сканировать всю структуру страницы и в ваших же интересах помочь им в этом, сосредоточить их усилия на контенте, а не на громоздкой стене разметки состоящей из кучи классов и идентификаторов или того хуже – Javascript обработчиков событий и CSS стилей прямо в атрибутах тегов (и такое до сих пор бывает).

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

Подытожим: благодаря оптимизации и сокращению HTML мы имеем совсем небольшой выигрыш в скорости загрузки сайта и в SEO (поисковой оптимизации), а также более чистый код.

Пожалуйста, оцените эту статью
Средняя оценка: 4.87 из 5 (проголосовало: 310)

Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!

Вы можете помочь развитию проекта, сделав всего 1 клик:
Спасибо!

Классы CSS

Как было сказано в статье по основам CSS, можно использовать теги в роли селекторов. К примеру, такой CSS код говорит о том, что весь текст внутри тега будет красного цвета:
b {
   color: red;
}
В таком случае будут окрашены все теги вне зависимости от их количества на странице. Если нужно задать свойство только для ограниченного количества элементов, то лучше использовать класс в качестве селектора.

Класс указывается для каждого тега самостоятельно так же, как и атрибуты. К примеру, придумаем класс под названием «test»:

<b>
В CSS коде селектор по классу будет иметь точку перед названием класса «.test»
.test {
   color: red;
}

Рекомендуем использовать в названиях класса только латинские символы, цифры, тире и подчёркивание

У каждого тега может быть несколько классов. Можно использовать их в качестве CSS селекторов как по отдельности, так и одновременно. Рассмотрим пример
<b>Тише, мыши.</b>
<b>Кот на крыше.</b>
Применим к этим тегам следующие свойства:
.test1 {
   color: red;
}
.test2 {
   color: green;
}
Результат будет таким:
Тише, мыши. Кот на крыше.
На втором предложении значение свойства color от класса test1 будет перезаписано из-за класса test2.

Теперь рассмотрим способы использования нескольких классов одновременно в качестве селектора. Если использовать предыдущий пример, то для прямого обращение ко второму тегу необходимо использовать селектор «.test1.test2»

.test1.test2 {
   color: green;
}
Обратите внимание, что между названиями классов в селекторе нет пробела. И в селекторе может быть любое количество классов. К примеру: «.test1.test2.test3.test4» будет соответствовать тэгу с таким набором классов:
<b>

Пробел между названиями классов в селекторе ставится, только если надо обратиться к вложенному элементу. К примеру, если есть html код:

<b>
   Тише, мыши.
   <u>Кот на крыше.</u>
</b>
То для обращения ко второму вложенному тегу надо поставить пробел внутри селектора между названиями классов, чтобы получилось так:
.test1 .test2 {
   color: green;
}
Таким образом можно обращаться к элементам любого уровня вложенности и с любым количеством тегов. К примеру, «.test1 .test2 .test3.test4 .test5» будет соответствовать вложенному тэгу с таким набором классов:
<b>
   <b>
      <b>
         <b>Сыр</b>
      </b>
   </b>
</b>
В таком случае CSS селектор будет выглядеть так:
.test1 .test2 .test3.test4 .test5 {
   color: green;
}
А результат на странице браузера будет выглядеть так:
Сыр

Селекторы типа, класса и ID — Изучение веб-разработки

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

Селектор типа иногда называется селектором имени тега или селектором элемента, поскольку он выбирает тег/элемент HTML в вашем документе. В примере ниже мы использовали селекторы span, em и strong.

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

Универсальный селектор обозначается звёздочкой (*). Он выбирает всё в документе (или внутри родительского элемента, если он сцеплен с другим элементом и с комбинатором потомка). В следующем примере мы используем универсальный селектор, чтобы убрать внешние отступы у всех элементов. Несмотря на стилизацию по умолчанию, добавленную браузером, — она раздвигает заголовки и абзацы с помощью отступов, — всё плотно сжато.

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

Использование универсального селектора для облегчения чтения ваших селекторов

Одно из применений универсального селектора состоит в том, чтобы облегчить чтение селекторов и сделать их более удобопонятными с точки зрения того, что они делают. Например, если мы хотим выбрать элементы-потомки элемента <article>, которые являются первыми дочерними элементами своего родителя, включая дочерние элементы самого <article>, и сделать их шрифт жирным, мы могли бы использовать псевдокласс :first-child, который мы будем изучать в уроке о псевдоклассах и псевдо-элементах, как селектор-потомок вместе с селектором элемента <article>: 

article :first-child {
  font-weight: bold;
}

Однако этот селектор можно спутать с article:first-child, который выберет любой элемент <article>, являющийся первым дочерним элементом другого элемента .

Чтобы избежать этой путаницы, мы можем добавить универсальный селектор в псевдокласс :first-child , чтобы было очевидно, что делает селектор. Он выбирает любой элемент, который является первым дочерним элементом элемента <article> или первым дочерним элементом любого потомка элемента <article>:

article *:first-child {
  font-weight: bold;
}

Хотя оба делают одно и то же, удобочитаемость значительно улучшилась.

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

Нацеливание классов на отдельные элементы

Вы можете создать селектор, нацеленный на конкретные элементы, к которым применён класс. В следующем примере мы подсветим <span> с классом highlight иначе, чем заголовок <h2> с классом highlight. Мы сделаем это, используя селектор типа для элемента, на который нацелены, с классом, добавленным с помощью точки, без пробела между ними.

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

Нацеливание на элемент, к которому применено более одного класса

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

В примере ниже у нас есть <div>, содержащий примечание. Серая граница применяется когда блок имеет класс notebox. Если у блока есть также класс warning или danger, мы меняем border-color (en-US).

Мы можем указать браузеру, что мы хотим подобрать только такой элемент, к которому применены два класса, сцепив их вместе без пробелов между ними. Вы увидите, что к последнему <div> не применён ни один стиль, так как он имеет только класс danger; ему нужен ещё и класс notebox, чтобы получить какую-нибудь стилизацию.

Селектор ID начинается с #, а не с точки, но используется так же, как и селектор класса. Однако ID может быть использован единожды на странице, и к элементу может быть применён только один id. Можно выбрать элемент, которому присвоен  id, а также вы можете предварить ID селектором типа для нацеливания на элемент, имеющий соответствующее сочетание элемента и ID. Вы можете увидеть оба варианта использования в следующем примере:

Предупреждение: Может показаться, что неоднократное использование в документе одного и того же ID выполняет задачи стилизования, но не стоит этого делать. Результатом будет неверный код, который приведёт к многочисленным странностям в поведении.

Примечание: Как мы знаем из урока по специфичности, ID имеет высокую специфичность. Он будет брать верх над большинством других селекторов. В большинстве случаев предпочтительнее добавить элементу класс, чем ID. Однако, если использование ID это единственный способ нацелиться на элемент — возможно, потому вы не имеете доступа к разметке и, следовательно, возможности её редактировать — это будет работать.

Продвинутые CSS-селекторы, о которых вы не знали

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

Дальше я собираюсь рассказать о работе селекторов атрибутов, но рекомендую с самого начала применять идентификаторы и классы, так как использование селекторов не всегда полезно. В процессе поиска элемента (CSS или JavaScript) браузеру приходиться «обойти» весь DOM страницы, чтобы найти нужный.

При использовании селекторов атрибутов на поиск затрачивается больше ресурсов и времени. Поэтому не стоит злоупотреблять селекторами и применять вместо них CSS id или class. Их нужно использовать только в том случае, если нет другого выхода. Например, когда HTML-код генерируется динамически, и вы никак не можете добавить в него классы или идентификаторы.

($=) – атрибут оканчивается определенным значением

Выбор элемента с помощью CSS, значение которого заканчивается определенным символом (суффиксом) выглядит следующим образом:

div[id$=“_myDiv”] {
  // CSS правило
}

Атрибут id$ находится внутри скобок элемента div. Обратите внимание, что вместо тега div можно указать любой другой HTML-элемент от input до span и так далее. Этот пример идеально подойдет для выбора элемента, если суффикс внутри атрибутов формируется динамически.

Пример:

<!-- HTML -->
<div> 
  Какой-то текст 
</div>

Чтобы выбрать этот элемент div, нужно использовать следующий селектор:

div[id$="_LoginPanel"] {
  margin: 0 3em;
  padding: 1em;
}

Нам необходимо указать $ после id атрибута в скобках.=»myPanel_»] { // CSS правила }

Единственное отличие двух описанных CSS class selector состоит в том, что перед знаком = (равно) указываются разные символы. В этом примере использован атрибут class, вместо id.

(* =) — атрибут содержит некоторое значение

Что делать, если и префикс и суффикс атрибутов генерируется динамически? В данном случае нужно найти элемент, значение атрибута которого содержит параметр:

<div>
  <h2>Какой-то текст</h2>
  <form>...</form>
</div>

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

div[class*="logoutPanel"] {
 // CSS правила
}

Таким образом, любой div, который содержит название класса “logoutPanel” будет выбран и к нему будут применены определенные стили.

(=) – атрибут со значением

Это еще один способ выбора элемента с определенным значением id, CSS class, name, value и т.д.:

<!-- HTML -->
<div class=“3453_mydynamicdiv”>
  <h2>My Dynamic Div</h2>
</div>

Можно обратиться к элементу div, используя указанный выше атрибут = или через атрибут класса:

// 1-й способ – выбор конкретного элемента класса
div[class="3453_mydynamicdiv"] {
  // CSS правила
}

// 2-й способ – выбор всех элементов класса
.= значение атрибута начинается с определенных символов;
  • *= значение атрибута содержит определенные символы.
    • Перед тем, как задать параметры class в CSS, нужно понимать, что псевдоклассы селекторов – это CSS селекторы с двоеточием перед ними. Многие из них часто используются для ссылок или интерактивных элементов:
    a:hover {}
a:active {}
a:focus {}
a:visited {}
:checked {}
:first-child {}
:last-child {}
// вы поняли
    Это удобно, когда необходимо получить доступ к каким-либо элементам, находящимся в определенном состоянии.
    Селектор псевдокласса :not(x) удаляет из набора определенные элементы на основе переданного параметра. Это полезно при стилизации всех элементов:
    <ul>
 <li>Blog</li>
 <li>About</li> 
 <li>Videos</li>
 <li>Music</li>
 <li>Merch</li>
</ul>
    С его помощью можно выбрать все элементы за исключением элемента с классом highlight, как в этом примере:
    .nav li:not(.highlight) {
  margin: 0 1em 0 0;
  padding: 5px 16px;
  display: inline-block;
}
    Можно пойти дальше и выбирать любые атрибуты.
    Например:
    В CSS кроме псевдоклассов существуют и псевдоэлементы. К ним как раз относится псевдоэлемент ::first-letter. С его помощью можно стилизовать первую букву любого абзаца. Этот эффект часто применяется в печатных изданиях. Создать заглавную букву при помощи псевдоэлемента ::first-letter довольно просто:
    p::first-letter {
  // стиль буквы
}
    Если не хотите стилизовать первые буквы в каждом абзаце, можно выбрать только первый абзац во всем тексте. Для этого нужно использовать вместе псевдокласс и псевдоэлемент (:first-child и ::first-letter):
    p:first-child::first-letter {
 // добавляем стили только к первой букве первого абзаца текста
}
    Этот подход освобождает от необходимости использования JavaScript.
    Этот псевдокласс я использую довольно часто. Он позволяет выбрать первый элемент определенного типа внутри родительского и применить к нему CSS class:
    article:first-of-type {
  margin-top: 0;
}
    :first-of-type не бывает без :last-of-type. Как вы уже наверное догадались, этот селектор работает противоположно селектору :first-of-type:
    article:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}
    Вы познакомились с «продвинутыми» CSS class selector, о которых не слышали раньше или никогда не сталкивались с ними. В любом случае я рекомендую вам ознакомиться с ними поближе и, возможно, вы будете чаще использовать их для решения своих повседневных задач по верстке.
    Дайте знать, что вы думаете по этой теме статьи в комментариях. За комментарии, подписки, дизлайки, лайки, отклики низкий вам поклон!
    ВЛВиктория Лебедеваавтор-переводчик статьи «Advanced CSS Selectors you never knew about»
    Сложные CSS селекторы, содержащие класс и ID элементов
    Перевод статьи: Multiple class ID selectors.
    Автор: Chris Coyier.
    Взгляните на приведенные ниже два CSS селектора. Сможете ли вы определить их функциональное отличие:
     #header.callout { }
    #header.callout { }
    На первый взгляд они кажутся полностью идентичными, но если присмотреться, то верхний селектор написан слитно, а нижний имеет знак пробела между #header и .callout. Это, казалось бы, незаметное визуальное отличие определяет совершенно разное функциональное назначение данных селекторов. Первый имеет непривычный вид и поэтому многие принимают его за ошибку, но на самом деле, он очень полезен в отдельных случаях. Давайте подробнее рассмотрим назначение этих двух селекторов.
    Верхний селектор #header.callout имеет следующую аннотацию:
     Выбирает элемент, с идентификатором header и CSS классом callout.
    Нижнему селектору #header.callout соответствует другое определение:
     Выбирает все элементы, имеющие CSS класс callout, которые являются дочерними по отношению к элементу с идентификатором header
    Возможные комбинации имен классов и идентификаторов в CSS селекторах.
    Особенно полезной с практической точки зрения является возможность составления селекторов из имен классов и идентификаторов без пробелов между ними.
    Комбинация из ID и имени класса.
    Такой вид CSS селектора рассмотрен выше. Приведем лишь еще один наглядный пример:
     Текст этого заголовка должен быть красным.
    #id-name.class-name {color: red;}
    Вариант из нескольких имен классов.
    В этом случае селектор применяется к элементу, содержащему несколько CSS классов. Пример, представленный ниже, использует элемент, имеющий лишь два класса, но это не предел:
     Используем несколько имен классов
    .first-class-name.second-class-name {color: red;}
    Сложные комбинации.
    Ограничений по длине выстраиваемой цепочки из идентификаторов и классов при создании CSS селектора нет, и поэтому, вы можете использовать необходимое их количество и комбинации. Вот пример:
    .snippet#header.coding.red {color: red;}
    Пример использования.
    Какую же пользу можно извлечь из таких комбинаций? Целесообразность использования сложных селекторов для элементов с идентификаторами кажется очень сомнительной, так как идентификаторы, сами по себе являются уникальным средством выбора элементов документа. Они, хотя и применяются реже, но все же иногда без них не обойтись. Вот пример такого селектора, который переопределяет стиль для элемента с идентификатором:
     #header {color: blue;}
    #header.override {color: red;}
    Второй вариант селектора выбирает тот же элемент, но переопределяет цвет шрифта, установленный в предыдущей строке. Он может применяться вместо следующего правила:
    .override {color: red! important}
    Более того, селектор в данном случае может быть еще точнее, выбирая нужный элемент в конкретных условиях.
    Селекторы, состоящие из нескольких имен классов, являются более популярными и полезными. Хочется обратить особое внимание на их применение в так называемом объектно ориентированном CSS стилевом оформлении документов, которое является предметом различных споров. К примеру, у вас имеется некоторое количество блоков <div>, и для их оформления вы применяете несколько описательных имен классов:
     <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    Все присутствующие блоки используют класс box, который может содержать свойства, определяющие размерность элемента или текстуру его фона, общие для всех блоков. Кроме того, некоторые из них содержат классы с именами цветов, которые нужны для определения цветовой палитры, используемой для оформления элементов блока (текста, фона). К примеру, класс green может устанавливать зеленый фон элемента и светло-зеленый шрифт текста внутри него. Так же в примере имеются блоки, содержащие имя класса border, который, видимо, отвечает за отображение границ элемента. Те из них, у которых нет класса border, границ не имеют.
    Теперь давайте определим, указанные в HTML разметке CSS классы:
    .box {width: 100px; float: left; margin: 0 10px 10px 0;}
    .red {color: red; background: pink;}
    .blue {color: blue; background: light-blue;}
    .green {color: green; background: light-green;}
    .border {border: 5px solid black;}
    Ну что ж, в результате мы имеем необходимый набор инструментов в виде классов, позволяющих, создавая новые элементы блоки, оформлять их соответствующим образом – подбирать цвет фона, шрифта и при необходимости устанавливать границу, используя при этом семантически корректный способ. Более того, мы можем модифицировать уже имеющиеся классы и создавать их комбинации, делая такой набор более гибким и удобным. К примеру, если вы хотите определить уникальный цвет границ только для красных блоков, то это достигается при помощи следующего уточняющего селектора:
    .red.border {border-color: #900;}
    Специфичность рассмотренных селекторов.
    Очень важным моментом в данном вопросе является тот факт, что CSS специфичность приведенных в нашем примере селекторов будет иметь одинаковые значения, как в сложном селекторе, с несколькими именами классов, так и в том случае, когда оба класса используются по отдельности. Именно эта особенность и придает рассмотренным селекторам способность переопределения установленных ранее стилей, как это видно из предыдущего примера.
    Поддержка браузерами.
    Все новые версии популярных браузеров, включая IE7, без проблем поддерживают такие комбинации CSS селекторов. Чего не скажешь о IE6, который, при использовании сложного селектора, производит отбор элементов только по последнему имени класса, игнорируя предыдущие. То есть, при использовании селектора .red.border в этом браузере будут выбраны блоки только с классом .border, что полностью разрушает идею рассматриваемого в статье подхода. Но если поддержка IE6 для вас привычное дело, то вы с легкостью справитесь с подобными ситуациями, обойдя их с помощью CSS хаков и условных комментариев.
     Post Views: 5 293
    Вложенные правила · Less. Путеводитель для новичков
    В хорошо структурированных таблицах стилей нет необходимости присваивать каждому элементу классы. Достаточно лишь более подробно описывать стили элементов, используя возможность вкладывать селекторы в другие селекторы. К слову, такие селекторы называются вложенными и представляют собой объёмную структуру.
    Пример 2.2.1
    Ниже приведён так называемый «подробный CSS», в котором представлена модель вложенности одних селекторов в другие селекторы.
    .global-header {
  background-color: #f5f5f5;
  color: #443d3d;
  border-bottom: 1px solid #ddd;
}

.global-header h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 4rem;
}

.global-header h2 small {
  font-size: 2rem;
}

.global-header .header-actions {
  background-color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}

    Решение проблем
    Все это хорошо, но ровно до тех пор, пока имена классов короткие, глубина вложенности не велика, а ваши глаза в состоянии уследить за этой структурой. Лично я, до тех пор, пока не стал пользоваться CSS-препроцессорами, писал код именно так, попутно разделяя CSS-файл на логические блоки и пытаясь уследить за его чистотой. Это удобно и практично, но мне быстро надоедало сортировать код по вложенности, и моя таблица стилей иногда была похожа на мешанину из букв и цифр. Разумеется, что перед финальной сборкой проекта все это исправлялось, но это не тот случай, на который хочется тратить время.
    Представьте себе оглавление простейшей книги, например, такое:
    1. Глава 1. Это моя первая глава книги
1.1. Это мой первый рассказ о том, что я сделал
1.1.1. Немного подробнее о том, что я сделал
1.2. Это мой второй рассказ о том, что я сделал
1.Х. ...

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

    Это мой второй рассказ о том, что я сделал

    Именно такая модель вложенности присутствует в Less, когда один селектор, в прямом смысле слова, вкладывается в другой селектор. Таким образом получается легко поддерживаемая, читаемая и приятная глазу структура. Если же попытаться спроецировать такую модель на CSS-код, то она будет иметь вид:
    .class-1 {
  property: value;

  .class-2 {
    property: value;
  }

  .class-3 {
    property: value;
  }
}

    Для большей наглядности я предлагаю обратиться к конкретному примеру, в котором я постараюсь сопоставить классический CSS и Less код.
    Пример 2.2.2
    Здесь я переписал код из примера 2.2.1, заменяя классический синтаксис на препроцессорный.
    .global-header {
  background-color: #f5f5f5;
  color: #443d3d;
  border-bottom: 1px solid #ddd;

  h2 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 4rem;

    small {
      font-size: 2rem;
    }
  }

  .header-actions {
    background-color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
  }
}

    На изображении ниже представлена модель вложенности, описываемая в этом примере. Для наглядности и понимания сути происходящего экран разделен на две части, где слева код написан на препроцессорном языке, а справа на «чистом» CSS.
    Мысли и советы
    Согласитесь, теперь ваш код становится интуитивно понятным и удобным для чтения. В такой структуре сложно запутаться и потеряться среди селекторов, ведь здесь чётко видна их вложенность и не нужно помнить имя родительского селектора — за нас это делает компилятор.
    Предостережение!
    Постарайтесь запомнить раз и навсегда, что вкладывать селекторы друг в друга можно бесконечно, но делать это строго не рекомендуется! Многие разработчики советуют следить за тем, чтобы структура, в общем случае, не превышала трёх вложений. Нет необходимости вкладывать селекторы, начиная от родительского, на такую глубину. Максимально допустимый уровень, в крайних случаях, пять вложений. Старайтесь избегать крайних случаев, если это действительно не требуется.
    Селектор .class | CSS справочник
     CSS селекторы
    Значение и применение
     
    Селектор класса в CSS.
    Селектор .class стилизует все элементы с указанным классом. После имени идет блок описаний (объявлений), содержащий свойства и их значения.
    Обратите внимание на следующие правила, которые необходимо соблюдать при работе с селекторами класса:
    • все названия селекторов класса должны начинаться с точки (благодаря ей браузеры находят эти селекторы в таблице стилей). Точка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута class она не ставится, будьте внимательны из-за этого возникает много ошибок).
    • используйте только буквы алфавита (A-Z, a-z), числа, дефисы, знаки подчеркивания.
    • название после точки всегда должно начинаться с символа (неправильно: .50cent, .-vottakvot).
    • Учитывайте регистр при наименовании стилевых классов, т.к. они к этому чувствительны и очень ранимы (.vottakvot и .VotTakVot разные классы).
    Поддержка браузерами
    CSS синтаксис:
    .class {
блок объявлений;
}

    Обращаю Ваше внимание, что вы можете использовать селекторы класса напрямую к HTML элементам, используя следующий синтаксис:
    a.test { /* выбирает все элементы <a> с классом test */
блок объявлений;
}
p.intro { /* выбирает все элементы <p> с классом intro */
блок объявлений;
}

    Версия CSS
     CSS1
    Пример использования
    И так, мы хотим, чтобы один из элементов выглядел не так, как другие. Для этого нам необходимо создать селектор, назначив ему имя, которое нам необходимо придумать самостоятельно:
    .test {
text-align: center; /* горизонтальное выравнивание текста по центру */
font-family: Courier; /* задаем тип шрифта Courier */
color: green; /* задаем цвет текста*/
margin-top: 50px; /* добавляем отступ от верхнего края элемента */
}

    После того как мы создали наш класс в таблице стилей, нам необходимо применить его к интересующему нас элементу, или элементам, которые мы хотим стилизовать. Чтобы указать класс для определенного элемента, необходимо добавить к этому элементу глобальный HTML атрибут class со значением нашего класса, но без точки:
    <h3 class = "test">Заголовок второго уровня</h3> /* задаем класс для элемента*/

    Теперь соберем это в одном примере и посмотрим результат:
    <!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title> Селекторы класса</title>
<style>
.test {
text-align: center; /* горизонтальное выравнивание текста по центру */
font-family: Courier; /* задаем тип шрифта Courier */
color: green; /* задаем цвет текста*/
margin-top: 50px; /* добавляем отступ от верхнего края элемента */
}
</style>
</head>
<body>
	<h3>Обычный заголовок второго уровня</h3>
	<h3 class = "test">Заголовок с заданным классом</h3>
</body>
</html> 

    Результат нашего примера:
     Использование селектора класса.
    Селекторы класса очень гибкий инструмент, который позволяет указать конкретный стиль даже к одному слову предложения. Для этого мы поместим это слово внутри элемента <span> и назначим этому элементу определённый класс, который опишем во внутренней таблице стилей:
    <!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример выделения одного слова</title>
<style>
.test {
color: #00FF00; /* задаём цвет текста */
font-size: 30px; /* задаем размер шрифта*/
}
</style>
</head>
<body>
	<h3>Обычный заголовок <span class = "test">второго</span> уровня</h3>
</body> 
</html>

    Результат нашего примера:
     Рис. 6 Пример выделения одного слова с использованием селектора класса.CSS селекторы
     Combinators - Мастерская по макету CSS 
     Добавление класса или идентификатора - не единственный способ изменить стиль некоторых частей документа. Наши более сложные селекторы дают вам возможность выбирать элементы в зависимости от того, где они находятся в документе. Первый набор селекторов, на который мы можем взглянуть, - это комбинаторы. Есть четыре разных комбинатора, и они работают, комбинируя другие селекторы.
     Мастер-класс по макету CSS: Комбинаторы 
     
     Селектор потомков 
      Выбрать все элементы, являющиеся потомками указанного родителя.
     Когда вы используете селектор-потомок, вы можете указать родительский селектор, а затем элемент, который хотите стилизовать. Итак, если у меня есть такая разметка:
      
     Содержимое 
    

    
  
     Содержимое внутри блочного класса. 
    

          
     Если бы я выбрал элемент p с помощью селектора элементов, который бы стилизовал оба абзаца - один внутри div с классом box, а также тот, который снаружи. Чтобы стилизовать только p внутри.box Я использую селектор потомков.
     . Коробка п {}  
     Здесь  .box  - это указанный родительский объект, а p - это селектор внутри этого родителя, к которому мы собираемся применить стили CSS.
     В списке может быть более одного потомка. Например, выбор только элементов li, которые являются дочерними элементами элемента  ul  внутри родительского элемента с классом box.
      .box ul li {}  
     Вышеупомянутый селектор не выбрал бы элемент li, если бы он находился внутри  ol .С длинными цепочками селекторов вы снова можете попасть в ловушку создания CSS, который очень трудно использовать повторно. Если ваши селекторы содержат более трех элементов, это часто указывает на то, что существует лучший способ структурировать ваш CSS.
     Селектор детей 
      Выбрать все элементы, которые являются непосредственными дочерними элементами указанного родителя 
     Селектор потомков будет нацелен на всех потомков, даже если есть другие элементы между родителем и потомком. Например, если мы возьмем следующую разметку:
      
      
  
    •  Пункт первый 
      • 
  
    •  Пункт два
    
        
      
      •  Пункт 2а 
        • 
      
      •  Пункт 2b 
        • 
    
      
  
      • 
  
    •  Пункт третий 
      • 

          
     Если мы использовали селектор потомков:
     .шт. ли {}  
     При этом будут выбраны все элементы  li , вложенные в первую  ul  и вложенные внутри ul для элемента 2. Если вместо этого использовать дочерний селектор:
      .items> li {}  
     При этом будут выбраны только элементы  li , которые являются прямым потомком  .items . Если между ними есть другой элемент, то  li  не будет выбран. Примером того, где вы можете использовать этот метод, является удаление маркеров списка из внешнего списка, но сохранение их для вложенных списков.
      .items> li {
  стиль списка: нет;
}  
     Соседний родственник 
      Выбрать элементы, которые являются соседними родственниками элемента 
     Селектор смежного родственного элемента - это полезный селектор, который позволяет выбирать элемент, когда он находится рядом с другим элементом. Вот как мы можем работать с такими вещами, как составные заголовки в CSS.
     Часто просят сделать абзац, который идет сразу после заголовка, каким-либо образом, чтобы выделить его.Этого можно достичь с помощью соседнего брата, следующий селектор выбирает элемент p только тогда, когда он идет после h3.
      х3 + п {}  
     Конечно, их можно комбинировать. Если вы хотите, чтобы это происходило только для содержимого внутри оболочки с классом  .box , вы можете объединить селектор-потомок со смежным родственником.
     . Коробка h3 + p {}  
     Вышеупомянутый селектор будет выбирать только элемент p, который идет после элемента h3, где оба находятся внутри чего-то с классом.коробка.
     General Sibling 
      Выбрать элементы, которые являются родственниками элемента 
     Общий селектор одноуровневых элементов работает аналогично соседнему одноуровневому элементу, но будет выбирать всех одноуровневых элементов, следующих после указанного элемента, даже если они не находятся рядом друг с другом. Этот селектор был добавлен на уровень 3 модуля «Селекторы».
     Если я хочу выбрать все элементы p, которые идут после h3, я бы использовал:
      h3 ~ p {}  
     Это выберет абзацы, но не заголовки, списки или что-то еще.
     Несколько классов / идентификаторов и селекторов классов 
     Можете ли вы заметить разницу между этими двумя селекторами?
      # header.callout {}

#header .callout {}  
     Они выглядят почти одинаково, но верхний не имеет пробелов между  #header  и  .callout , а нижний - нет.Эта небольшая разница имеет огромное значение в том, что он делает. Некоторым из вас этот верхний селектор может показаться ошибкой, но на самом деле это довольно полезный селектор. Давайте посмотрим, что означает этот верхний селектор, и подробнее рассмотрим этот селектор стилей.
     Вот «простой английский» из  #header .callout :
     Выберите все элементы с именем класса , выноска , которые являются потомками элемента с идентификатором , заголовок .
     Вот «простой английский» заголовка  #header.выноска :
     Выберите элемент с идентификатором , заголовок , а также имя класса , выноска .
     Может быть, этот рисунок прояснит это:
     Комбинации классов и идентификаторов 
     Важным моментом здесь является то, что вы можете настроить таргетинг на элементы, которые имеют комбинации классов и идентификаторов, связав эти селекторы вместе без пробелов.
     Селектор идентификаторов и классов 
     Как мы уже говорили выше, вы можете настроить таргетинг на элементы с помощью комбинации идентификатора и класса.
       
     Это должно быть красным 
           
      # one.two {цвет: красный; }  
     Селектор двойного класса 
     Нацельтесь на элемент, который имеет все несколько классов. Ниже показаны два класса, но не ограничиваются двумя.
       
     Двойной класс 
           
      .three.four {цвет: красный; }  
     Кратное 
     Здесь мы не ограничены только двумя, мы можем объединить столько классов и идентификаторов в один селектор, сколько захотим.
      .snippet # header.code.red {цвет: красный; }  
     Хотя учтите, что это уже немного смешно =)
     Пример 
     Так насколько все это на самом деле полезно? В любом случае они должны быть уникальными, особенно с идентификаторами, так зачем вам объединять его с классом? Я признаю, что варианты использования версий с идентификаторами более тонкие, но, безусловно, они есть. Один из них - легкое переопределение стилей.
      #header {цвет: красный; }
# заголовок.переопределить {цвет: черный; }  
     Второй нацелен на тот же элемент, но переопределяет цвет, вместо того, чтобы использовать:
      .override {цвет: черный! Important}  
     или, возможно, перед селектором что-то более конкретное.
     Более полезно использовать несколько классов и использовать их в «объектно-ориентированном» стиле CSS, который в последнее время очень популярен. Допустим, у вас есть несколько разделов на странице, и вы использовали для них несколько различных описательных имен классов:
      
     
    

     
    

     
    

     
    

     
    

     
    

     
          
     Все они имеют общий класс «box», который, возможно, задает ширину или текстуру фона, что у них общего.Затем некоторые из них имеют имена цветов как классы, это будет для управления цветами, используемыми внутри коробки. Возможно, зеленый означает, что поле имеет зеленоватый фон и светло-зеленый текст. Некоторые из них имеют имя класса «граница», по-видимому, на них будет граница, а у остальных - нет.
     Итак, давайте настроим:
      .box {width: 100px; плыть налево; маржа: 0 10px 10px 0; }
.red {цвет: красный; фон: розовый; }
.blue {цвет: синий; фон: голубой; }
.зеленый {цвет: зеленый; фон: светло-зеленый; }
.border {border: 5 пикселей сплошной черный; }  
     Круто, у нас есть хороший набор инструментов, где мы можем создавать новые блоки, и у нас есть множество вариантов, мы можем выбрать цвет и, если у него есть граница или нет, просто применив некоторые вполне семантические классы. Наличие этого инструментария имени класса также позволяет нам нацеливаться на уникальные комбинации этих классов. Например, может быть, эта черная рамка не работает с красными полями, давайте исправим это:
     .red.border {цвет границы: # 900; }  
    Цвет границы на красном поле изменился, потому что он имел как красный класс, так и класс границы
     На основе этой демонстрационной страницы.
     Специфичность 
     Также важно отметить, что значения специфичности таких селекторов будут иметь такой же вес, как если бы они были отдельными. Это то, что дает им решающую силу, как в примере выше.
     Совместимость с браузером 
     Все хорошие современные браузеры поддерживают это, а также IE до версии 7.IE 6 довольно странный. Он выбирает на основе  последнего селектора  в списке. Таким образом, «.red.border» будет выбираться только на основе «.border», что в некотором роде портит ситуацию. Но если вы поддерживаете IE 6, вы в любом случае привыкли к подобному дурачеству и можете просто исправить это с помощью условных стилей.
     Как создавать классы с помощью CSS 
      Часть серии:
 Как создать сайт с помощью CSS 
     Это руководство является частью серии по созданию и настройке этого веб-сайта с помощью CSS, языка таблиц стилей, используемого для управления представлением веб-сайтов.Вы можете следить за всей серией, чтобы воссоздать демонстрационный веб-сайт и познакомиться с CSS, или использовать описанные здесь методы для других проектов веб-сайтов CSS.
     Прежде чем продолжить, мы рекомендуем вам иметь некоторые знания HTML, стандартного языка разметки, используемого для отображения документов в веб-браузере. Если вы не знакомы с HTML, вы можете изучить первые десять руководств нашей серии "Как создать веб-сайт с помощью HTML", прежде чем начинать эту серию.
     Введение 
     В этом руководстве вы создадите селектор CSS  class , который позволит вам применять правила CSS только к элементам HTML, которым назначен класс.Селекторы классов CSS полезны, когда вы хотите применить разные правила стиля для разных экземпляров одного и того же элемента HTML.
     Предварительные требования 
     Чтобы следовать этому руководству, убедитесь, что вы настроили необходимые файлы и папки, как описано в предыдущем руководстве из этой серии «Как настроить проект CSS и HTML».
     Как работают селекторы классов CSS 
     Селектор классов CSS позволяет назначать правила стиля элементам HTML, которые вы назначаете этим классом, а не  всем  экземплярам определенного элемента.В отличие от элементов HTML (таких как 
     , 
      или   ), имена которых предопределены, имена классов выбираются разработчиком при создании класса. Именам классов всегда предшествует . , который может помочь вам различать селекторы тегов и селекторы классов в файлах CSS.
     Правило CSS для селектора класса записывается так же, как правило для селектора тегов, за исключением .  добавлено к имени класса:
     .red-text {
  красный цвет;
}
  
     Чтобы использовать класс при добавлении HTML-содержимого на вашу веб-страницу, вы должны указать его в открывающем теге HTML-элемента, используя атрибут class в вашем HTML-документе, например:
       
     Контент. 
     
      
     Создание класса CSS с помощью селектора классов 
     Давайте начнем изучать классы CSS на практике. Сотрите все в файле  styles.css  и добавьте следующий фрагмент кода, чтобы указать правило для класса  red-text :
     стилей.css
      .red-text {
  красный цвет;
}
  
     После добавления фрагмента кода в файл  styles.css  сохраните файл.
     Вернитесь к вашему  index.html  и сотрите все, кроме первой строки кода  , который ссылается на вашу таблицу стилей CSS. Затем добавьте следующий фрагмент кода HTML:
     index.html
      
     Вот первый образец текста абзаца.
    
      
     Обратите внимание, что здесь перед именем класса не добавляется . , когда он используется в качестве селектора для правила CSS. Весь ваш файл  index.html  должен иметь следующее содержимое:
     index.html
     . . .


    
  
     В этом фрагменте кода вы добавили текст с помощью тега HTML 
     .Но вы также указали класс  red-text , добавив выделенный атрибут класса  class = "red-text"   внутри  открывающего тега HTML.
     Сохраните файл  index.html  и загрузите его в браузер. (Инструкции по загрузке файла HTML см. В шаге нашего руководства «Как просмотреть автономный файл HTML в браузере»).
     Вы должны получить веб-страницу с красным текстом:
     Давайте добавим дополнительный класс CSS для изучения стилизации различных частей текстового содержимого 
      с помощью разных классов.Добавьте следующий фрагмент кода в файл  styles.css  (после правила CSS для «красного текста»):
     styles.css
      .yellow-background-text {
  цвет фона: желтый;
}
  
     Это правило CSS объявляет, что классу  yellow-background-text  назначается значение  yellow  для свойства  background-color . Любой текстовый элемент HTML, которому назначен этот класс, будет иметь желтый фон. Обратите внимание, что использование слова  текст  в классе  yellow-background- * text *  предназначено только для удобства чтения человеком.Вам не нужно включать слово  текст  в имена классов для классов, назначенных тексту HTML.
     Чтобы применить этот новый класс CSS, вернитесь к файлу  index.html  и добавьте следующую строку кода внизу:
     index.html
      
     Вот второй образец текста абзаца. 
    
  
     В этом фрагменте кода вы добавили текстовое содержимое с помощью элемента 
      и указали класс  yellow-background-text .Сохраните файл и перезагрузите его в своем браузере. У вас должна быть веб-страница с двумя разными предложениями, первое - красным, а второе - с желтым фоном:
     Обратите внимание, что к тегу HTML можно добавить несколько классов. Попробуйте добавить оба класса в один текстовый элемент, добавив следующую строку в файл  index.html :
     index.html
      
     Вот третий образец текста. 
    
      
     Обратите внимание, что имена классов разделяются только пробелом.Сохраните файл и перезагрузите его в браузере. Вы должны получить что-то вроде этого:
     Ваша третья строка текста теперь должна быть оформлена в соответствии со значениями свойств, установленными в классе  red-text  и классе  yellow-background-text , и иметь красный шрифт и желтый фон.
     Добавление классов CSS к изображениям 
     Классы
     CSS также могут применяться к другим элементам HTML, например изображениям. Чтобы изучить использование классов CSS для изображений, сотрите содержимое в стилях .css  и добавьте следующий фрагмент кода:
     styles.css
      .black-img {
  граница: 5 пикселей, пунктирная черная;
  радиус границы: 10%;
}

.yellow-img {
  граница: сплошной желтый цвет 25 пикселей;
  радиус границы: 50%;
}

.red-img {
  граница: двойной красный цвет 15px;
}
  
     Здесь вы создали правила CSS для трех разных классов, которые можно применить к тегу HTML   . Прежде чем продолжить, давайте кратко изучим, что мы заявили в каждом наборе правил:
    •  Первое правило CSS объявляет, что класс  black-img  должен иметь границу  black ,  пунктирную границу  шириной пять пикселей и радиус границы   размером 10%, что дает элементу закругленные углы.
    •  Второе правило CSS объявляет, что класс  yellow-img  должен иметь  yellow ,  solid  border 25 пикселей шириной и  border-radius  размером 50%, что придает элементу круглую форму.
    •  Третье правило CSS объявляет, что класс  red-img  должен иметь границу  red ,  double  шириной 15 пикселей. Вы не установили радиус границы, поэтому граница будет соответствовать форме элемента.
     Сохраните стили .css  файл. Затем удалите все из файла  index.html  (кроме первой строки кода:  ) и добавьте следующий фрагмент кода:
     index.html
      


  
     Каждая из этих трех строк HTML-кода добавляет изображение в HTML-документ и назначает ему один из трех классов, которые вы только что добавили к стилям .css  файл. Обратите внимание, что вы получаете изображение в Интернете. Вы также можете использовать свое собственное изображение, указав путь к файлу, как описано в нашем руководстве «Как добавить изображения на свою веб-страницу с помощью HTML».
     Сохраните файл  index.html  и загрузите его в браузер. Вы должны получить что-то вроде этого:
     Теперь ваша веб-страница должна отображать три изображения, каждое из которых оформлено в соответствии с различными спецификациями назначенного им класса.
     Продолжить изучение классов CSS, попытаться создать новые классы с разными наборами правил и применить их к разным типам содержимого HTML.Обратите внимание, что свойства и значения, указанные в блоках объявления классов, будут работать только с элементами, для которых они предназначены. Например, объявление  font-color  не изменит цвет границы изображения. Аналогично, объявление  height  не изменит размер шрифта.
     Заключение 
     Вы узнали, как создавать классы, назначать им определенные значения свойств и применять их к тексту и изображениям. Вы вернетесь к использованию классов, когда начнете создавать веб-сайт во второй половине этой серии руководств.
     В следующем руководстве вы создадите селекторы CSS  ID , которые работают аналогично селекторам классов, за исключением некоторых уникальных функций.
     Nested vs Flat CSS: вопрос производительности | Тамаш Полгар | Разговоры разработчиков 
     Вложенные классы - одно из преимуществ динамического CSS, но они содержат множество предупреждений. Как правило, не рекомендуется создавать структуры классов глубже 3–4 уровней, иначе это повлияет на скорость рендеринга страницы.
     Другими словами, это:
    .class-01 {фон: красный; } 
     .class-02 {фон: зеленый; } 
     .class-03 {фон: синий; } 
     предположительно отображается быстрее, чем это:
     .class-01 {
     background: red; 
     .class-02 {
     фон: зеленый; 
     .class-03 {
     фон: синий; 
    } 
    } 
    } 
     Что на самом деле выглядит так после обработки:
     .class-01 {
     background: red; 
    } 
     .class-01 .class-02 {
     фон: зеленый; 
    } 
    .class-01 .class-02 .class-03 {
     фон: синий; 
    } 
     Вопрос в том, насколько велики накладные расходы при использовании вложенных классов и насколько они могут быть сложными, не влияя на скорость рендеринга страницы?
      Создадим тестовую страницу! 
     Для целей этого исследования я создал два простых, но технически чрезмерно сложных HTML-файла. Оба содержат 10  div , и каждый имеет 10 дополнительных  div  внутри следующим образом:
     
     
     
     
     
     
     
     
     
     
     
     
     < div>

    Единственное различие между двумя документами - это таблицы стилей, которые они используют.Один использует плоскую таблицу стилей со 100 уникальными классами на одном уровне. Другой имеет классы, встроенные друг в друга группами по 10, аналогично расположению самих блоков div . Конечно, последнее - это SCSS, поэтому сначала его нужно было преобразовать в CSS, и я использовал эту версию CSS для фактического тестирования.

    Вы можете получить доступ к этим файлам для запуска собственных тестов здесь:

    Результаты тестов

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

    Плоский CSS: разбор 0,65 мс, рендеринг 4,96 мс
    Вложенный CSS: разбор 0,89 мс, рендеринг 4,6 мс

    Это очень похоже на ничью. Но давайте попробуем что-нибудь посерьезнее.

    Enter: Lighthouse

    Lighthouse - это простой и универсальный инструмент для профилирования веб-сайтов. Его можно запустить как расширение Chrome, но он также работает из командной строки или как модуль Node.Я использовал его из командной строки с простым пакетным файлом, который запускал его 1500 раз, и в каждом цикле он сначала отображал плоскую версию, а затем вложенную версию. Метрики были сохранены в 3000 файлов JSON, которые вы также можете найти в репозитории, если хотите провести свои собственные расчеты. Также включен простой скрипт Node, используемый для расчета средних значений.

    Lighthouse проверяет огромное количество различных параметров. Я рассматривал три из них:

    First Meaningful Paint: измеряет, когда видно основное содержимое страницы.
    Первый простой ЦП: отмечает первый раз, когда основной поток страницы становится достаточно тихим для обработки ввода.
    Время до интерактивности: время, необходимое для того, чтобы страница стала полностью интерактивной.

    На выполнение теста ушло около шести часов, и усредненные результаты следующие:

    Плоский CSS: 

     Первая значимая отрисовка: 799,5072646533341 (800 мс) 
     Первый простоя ЦП: 835,319597986667 (835 мс) 
     Время до взаимодействия: 845.2059313200003 (845 мс)

    Вложенный CSS: 

     Первая значимая отрисовка: 798,8996750833321 (799 мс) 
     Первый простоя ЦП: 834,6496750833313 (835 мс) 
     Время до взаимодействия: 845,308341749998 (около 9452 мс). Разница в среднем составляет около 0,01 мс или даже меньше, что не дает повода для беспокойства. Даже при явном игнорировании передового опыта и хранении классов в кучу нет существенной разницы в производительности CSS. 
     
     Не стесняйтесь запустить свой собственный тест на данных, опубликованных в моем репо.Обратная связь приветствуется. 
     
     Селекторы классов CSS 
     

 
     CSS-классы дают дополнительную гибкость для определения элементов, которым должен быть присвоен определенный стиль. 
    
 
     Несколько уроков назад мы узнали о селекторах. Вы можете вспомнить, что селекторы - это то, к чему мы применяем стиль. В наших примерах все наши селекторы были HTML-элементами. Например, мы решили сделать элемент   
     
      синим. 
    
 
     Теперь это хорошо работает, если вы хотите, чтобы все заголовки  были синими.Но что, если вы хотите, чтобы только  и  ваших заголовков были синими? Возможно, вы хотите, чтобы цвет ваших заголовков отражал раздел сайта, в котором вы находитесь. 
    
 
     Похоже, вам нужно использовать классы! 
    
 
     В CSS классы позволяют применить стиль к заданному  классу  элемента. Для этого вы связываете элемент со стилем, объявляя стиль для класса, а затем присваивая этот класс элементу. 
    
  
     Синтаксис класса CSS 
     
 
     Вы объявляете класс CSS с помощью точки (.), за которым следует имя класса. Вы сами придумываете название класса. После имени класса вы просто вводите свойства / значения, которые хотите присвоить своему классу. 
    
 
    
.class-name {свойство: значение; } 
    
 
     Если вы хотите использовать одно и то же имя класса для нескольких элементов, но каждый с разным стилем, вы можете добавить к точке префикс имени HTML-элемента. 
    
 
     Например: 
    
 
    
p.large {размер шрифта: 2em; } 
    
  
     Пример класса CSS 
     




 
    

 Пример 
<стиль>
  div.css-section {
    граница: 1 пиксель, красный пунктир;
    отступ: 20 пикселей;
    }
  p.css-section {
    цвет: зеленый;
    }


     Класс CSS 
    

     Классы CSS могут быть очень полезными 
     
    




 
     Вы также можете выбрать элементы (или классы), вложенные в другой элемент или класс. Например,  div.css-section p  выберет все элементы  
     , вложенные в элемент  
     , который использует класс  .css-section .
    
 
     Одним из основных преимуществ этого является то, что вам не нужно применять класс к каждому экземпляру элемента, когда он вложен в другой элемент, который использует класс. 
    
 
     Вот пример: 
    




 
    

 Пример 
<стиль>
  div.css-section {
    граница: 1 пиксель, красный пунктир;
    отступ: 20 пикселей;
    }
  div.css-section p {
    цвет: зеленый;
    }


     Класс CSS
  
     Классы CSS могут быть очень полезными 
    

     
    





  
     ID против Class CSS: понимание различий 
     
 
     При сравнении класса CSS с идентификатором разница в том, что класс CSS применяет стиль к нескольким элементам.ID, с другой стороны, применяет стиль к одному уникальному элементу. ID также отличается тем, что вы можете использовать специальный URL-адрес для прямой ссылки на элемент, и он используется JavaScript. 
    

 


  
    
      
        

          

          
             
     Найди свой матч на тренировочном лагере 
    
            
              
       
    •