Селектор класса css: Селекторы по классу — CSS

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

• Назад
• Обзор: Building blocks
• Далее

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В примере ниже у нас есть <div>, содержащий примечание. Серая граница применяется когда блок имеет класс notebox. Если у блока есть также класс warning или

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

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

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

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

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

• Назад
• Обзор: Building blocks
• Далее

1. Каскад и наследование
2. Селекторы CSS
   • Селекторы типа, класса и ID
   • Селекторы атрибута
   • Псевдоклассы и псевдоэлементы
   • Комбинаторы
3. Модель коробки (The box model)
4. Фон и границы
5. Обработка разных направлений текста
6. Переполнение содержимого
7. Значения и единицы измерения
8. Изменение размеров в CSS
9. Элементы изображений, форм и медиа-элементы
10. Стилизация таблиц
11. Отладка CSS
12. Организация вашей CSS

Last modified: 000Z»>29 сент. 2022 г., by MDN contributors

Селекторы классов CSS — Как создать сайт

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

Схема CSS-кода выглядит следующим образом:

селектор {
 CSS-свойство: значение;
 CSS-свойство: значение;
 ... и т.д.
}

В селекторе класса (class), в качестве селектора, выступает имя класса:

.имяКласса {
 CSS-свойство: значение;
 CSS-свойство: значение;
 ... и т.д.
}

Обратите внимание на то, что перед именем класса ставится точка .

Селекторы классов — это выборка элементов, по значению глобального атрибута class=" "

Пример внедрения глобального атрибута class=" " в HTML-тег:

<тег> </тег>

имяКласса — это значение глобального атрибута class=" "

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

Допустим у нас есть HTML-документ, содержащий две статьи, первая статья о снежном барсе, вторая о полярном волке:

<!DOCTYPE html>
<html>
 <head>
  <title>Страница о снежном барсе и полярном волке</title>
 </head>
 <body>
  <h2>Снежный барс</h2>
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.  </p>
  <p>
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p>
  <h2>Полярный волк</h2>
  <p>
   Полярный арктический волк - подвид волка. Обитает в Арктике и тундре, на
   обширных пространствах северных регионов, которые пять месяцев в году,
   погружены в темноту. Чтобы выжить, волк приспособился есть практически
   любой корм, который только попадается ему на пути.</p>
  <p>
   Полярные волки хорошо усвоились к жизни в Арктике: они могут годами
   жить при минусовой температуре, месяцами не видеть солнечного света и
   неделями оставаться без пищи.
  Длина волка составляет 100-150 см, высота
   в холке может достигать 100 см, а масса у самцов переваливает за 100 кг.
   Продолжительность жизни полярного волка около 7 лет. В его рацион входят:
   леминги, зайцы, овцебыки, олени и птицы.</p>
 </body>
</html>

Страница в браузере будет выглядеть следующим образом.

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

Для этого, надо в теги заголовков и абзацев внедрить атрибуты class=" ". В теги относящиеся к статье о снежном барсе, внедрим class="bars", а в теги относящиеся к статье о полярном волке, внедрим class="volk"

В CSS-коде, вместо имён тегов, нужно вставить имена классов и перед их именем поставить точку .

<style>
 .bars {color: blue;}
 .volk {color: green;}
</style>

В итоге, получаем такой HTML-документ:

<!DOCTYPE html>
<html>
 <head>
  <title>Страница о снежном барсе и полярном волке</title>
  <style>
   . bars {color: blue;}
   .volk {color: green;}
  </style>
 </head>
 <body>
  <h2>Снежный барс</h2>
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.</p>
  <p>
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными.  Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p>
  <h2>Полярный волк</h2>
  <p>
   Полярный арктический волк - подвид волка. Обитает в Арктике и тундре, на
   обширных пространствах северных регионов, которые пять месяцев в году,
   погружены в темноту. Чтобы выжить, волк приспособился есть практически
   любой корм, который только попадается ему на пути.</p>
  <p>
   Полярные волки хорошо усвоились к жизни в Арктике: они могут годами
   жить при минусовой температуре, месяцами не видеть солнечного света и
   неделями оставаться без пищи. Длина волка составляет 100-150 см, высота
   в холке может достигать 100 см, а масса у самцов переваливает за 100 кг.
   Продолжительность жизни полярного волка около 7 лет. В его рацион входят:
   леминги, зайцы, овцебыки, олени и птицы. </p>
 </body>
</html>

Страница в браузере будет выглядеть следующим образом.

Читать далее: Селектор уникального идентификатора CSS

• Category: Разное

Дата публикации поста: 5 февраля 2016

Дата обновления поста: 16 октября 2014

Бесплатный хостинг от компании Бегет, для начинающих: beget.com/ru/hosting/free

Селектор класса — Xiper

Автор: Александр Головко Дата публикации:

Предыдущая статья Селектор типа.

Описание селектора:

• Выполняемая задача — выбор всех элементов по имени класса (по значению атрибута class).
• Обозначение — название класса с предшествующей ему точкой.
• Пример использования:

Установим высоту всех элементов с классом header (скорее всего — это шапка сайта) равной 200px.

.header {
	height: 200px;
} 

Подробнее про селектор класса

Рассмотренный ранее селектор типа позволяет определять стили для всех одинаковых тегов. Например, всех абзацев (тег p) или всех элементов списка (тег li). Как правило, в реальных условиях, требуется назначать стили по гораздо более гибкой схеме — допустим, конкретному тегу div или отдельному элементу списка. В этом случае можно применять селектор класса или селектор идентификатора.

Селектор класса позволит применить стили ко всем элементам с определенным значением атрибута class. Конечно, предварительно нужно эти самые атрибуты расставить в HTML-коде.

Примеры

Допустим, имеем следующий код:

<ul>
	<li>HTML и CSS приемы</li>
	<li>Обучение</li>
	<li>HTML справочник</li>
</ul>

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

/* зададим зеленый цвет текста в любых тегах с классом active */
.active {
	color: #0f0;
} 

Фактически, эта запись является сокращенной от следующей (я просто убрал универсальный селектор — это обычная практика):

/* этот код эквивалентен предыдущему */
*. active {
	color: #0f0;
} 

Обрати внимание, что класс можно присвоить сразу нескольким элементам:

<ul>
	<li>Этот текст будет зеленым</li>
	<li>А этот — нет</li>
	<li>А этот — зеленым</li>;
</ul>
<p>Зеленый абзац</p>
<p>Не зеленый</p>

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

p.active {
	color: #0f0;
} 

Регистрозависимость

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

Множественные классы

HTML позволяет задавать в качестве значения атрибута class список разделенных пробелами названий (порядок следования не имеет значения). Другими словами, один элемент может иметь сразу несколько классов:

<div></div>

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

Иногда такой подход удобен, но злоупотреблять им не стоит. Так, например, применение дополнительного класса active, зачастую бывает оправданно, ведь это позволит программеру однотипно обработать, например, выделяемые пользователем элементы — переключатели, вкладки, пункты меню. А вот, допустим, конструкция <div></div>, конечно, имеет право на жизнь, но лучше такого избегать, так как падает читаемость кода и растет вес страницы. В такой ситуации, возможно, лучше создать новый единый класс, для которого в CSS указать все необходимые стили.

Помимо объединения стилей, множественные классы дают нам еще одну интересную возможность — выбирать элементы с заданной комбинацией классов. Для этого названия классов в селекторе указываются подряд (без пробелов). Например:

/* это правило распространяется только на элементы, в списке классов которых встречаются (в любом порядке) и класс popup и класс active */
.popup.active { 
	color: #0f0;
} 

Иногда, такой финт позволяет сэкономить некоторое количество строчек кода. Но только в том случае, если тебе безразлична поддержка IE6. Да-да, к сожалению, этот браузер не понимает такой записи. Он применит данный стиль к элементам, класс которых указан последним. То есть, в нашем случае, к элементам с классом active. Ослику будет безразлично, есть ли у них класс popup. Так что пользоваться селекторами множественных классов нужно осмотрительно.

Область применения селектора классов

Концепция классов, один из краеугольных камней в верстке. Поэтому селекторы класса, скорее всего, будут самыми «частовстречающимися» в твоем CSS. Например, очень правильно будет верстать страницу, используя в качестве контейнеров теги div, задавая им определенные классы (в соответствии с функциональным назначением):

<div>
	<!--элементы шапки сайта-->
</div>
<div>
	<!--элементы панели меню-->
</div>
<div>
	<!--основное содержимое-->
</div>

Следующая статья — Селектор идентификатора.

CSS – Селекторы: виды, правила, примеры

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

• Селектор – это HTML-тег, к которому будет применяться стиль. Это может быть любой тег, например, <h2> или <table> и т.д.
• Свойство – это тип атрибута HTML-тега. Проще говоря, все атрибуты в HTML преобразуются в свойства CSS. Ими могут быть цвета, границы, отступы и т.д.
• Значение – задается свойству. Например, свойство цвета может иметь значение green, #008000 и т.д.

Синтаксис селекторов в CSS следующий:

селектор { свойство: значение }

Пример. Вы можете задать границу таблицы следующим образом:

table {
  border: 2px solid #FF8C00;
}

Здесь синтаксис селектора такой: table – это селектор, а border – свойство, а 2px solid #FF8C00 – значение этого свойства.

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

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

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

h2 {
  color: #8B4513;
}

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

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

* {
  color: #808080;
}

Это правило отображает в нашем документе содержимое каждого элемента в сером цвете.

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

Предположим, Вы хотите применить правило стиля к определенному элементу только тогда, когда оно находится внутри определенного элемента, то в этом Вам помогут вложенные селекторы или селекторы потомков. Как показано в следующем примере, правило стиля будет применяться к элементу <em> только тогда, когда оно находится внутри тега <ul>.

ul em {
  color: #CD5C5C; 
}

Селекторы класса

Вы можете задать правила стиля для элементов на основе атрибута class. Все элементы, имеющие этот класс, будут отформатированы в соответствии с определенным правилом.

.blue {
  color: #0000FF; 
}

Это правило отображает в нашем документе содержимое в синем цвете для каждого элемента с атрибутом class=»blue». Вы можете сделать селектор класса немного более конкретным. Например:

h2.blue {
  color: #0000FF; 
}

Это правило отображает содержимое в синем цвете только для элементов <h2> с атрибутом class=»blue».

Вы можете применить к одному элементу несколько селекторов класса. Рассмотрим следующий пример:

<p>
  Этот абзац будет оформлен классами center и bold.
</p>

ID селекторы

Вы можете задать правила стиля для элементов на основе атрибутa id. Все элементы, имеющие этот идентификатор, будут отформатированы в соответствии с определенным правилом.

#blue {
  color: #0000FF; 
}

Это правило отображает в нашем документе содержимое в синем цвете для каждого элемента с атрибутом id=»blue». Вы можете сделать id селектор немного более конкретным. Например:

h2#blue {
  color: #0000FF; 
}

Это правило отображает содержимое в синем цвете только для элементов <h2> с атрибутом id=»blue».

Истинная мощность id селекторов – это когда они используются в качестве основы для селекторов-потомков, например:

#blue h3 {
  color: #0000FF; 
}

В этом примере все заголовки второго уровня будут отображаться в синем цвете, когда они будут находиться в тегах с атрибутом id=»blue».

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

Вы уже знаете селекторы потомков. Существует еще один тип селектора, который очень похож на селекторы потомков, но имеет другую функциональность, это дочерний селектор. Рассмотрим следующий пример:

body > p {
  color: #0000FF; 
}

Это правило будет отображать все абзацы в синем цвете, если они являются прямым дочерним элементом <body>. Другие абзацы, помещенные внутри других элементов типа <div> или <td>, не будут иметь никакого эффекта этого правила.

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

HTML-элементы, идущие друг за другом, называются соседними. Рассмотрим следующий пример:

strong + em {
  color: #0000FF; 
}

Это правило будет отображать содержимое тега <em> в синем цвете, если он идет после элемента <strong>. Другие теги <em>, идущие не после тега <strong>, не будут иметь никакого эффекта этого правила.

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

Вы также можете применять стили к HTML-элементам с определенными атрибутами. Ниже правило стиля будет соответствовать всем input элементам, имеющим атрибут type со значением text:

input[type = "text"] {
  color: #0000FF; 
}

Преимущество использования селекторов атрибутов заключается в том, что элемент <input type = «submit» /> не изменяется, а цвет применяется только к нужным текстовым полям.

Для селектора атрибутов применяются следующие правила:

• p[lang] – выбирает все элементы абзаца с атрибутом lang.
• p[lang=»ru»] – выбирает все элементы абзаца, где атрибут lang имеет точное значение «ru».
• p[lang~=»ru»] – выбирает все элементы абзаца, где атрибут lang содержит слово «ru».
• p[lang|=»ru»] – выбирает все элементы абзаца, где атрибут lang содержит значения, которые являются точными «ru» или начинаются с «ru».

Несколько правил стиля

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

h2 {
  color: #00CED1;
  letter-spacing: .2em;
  text-transform: lowercase;
  margin-bottom: 2em;
  font-weight: 700;
}

Все пары свойств и значений разделяются точкой с запятой (;). Вы можете сохранить их в одной строке или нескольких строках. Для лучшей читаемости сохраняйте их в отдельных строках.

Не беспокойтесь о свойствах, упомянутых в вышеупомянутом блоке. Эти свойства будут объяснены в следующих уроках.

Группировка селекторов в CSS

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

h2, h3, h4 {
  color: #00CED1;
  letter-spacing: .2em;
  text-transform: lowercase;
  margin-bottom: 2em;
  font-weight: 700;
}

Это правило стиля будет применено к элементам h2, h3 и h4. Порядок списка при группировки селекторов не имеет значения. Все элементы в селекторе будут иметь соответствующие объявления, применяемые к ним.

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

#header, #content, #footer {
  position: absolute;
  width: 300px;
  left: 250px;
}

Источник: CSS — Syntax.

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

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

<h3 rel="friend">David Walsh</h3>

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

h3[rel=friend] {
	/* woohoo! */
}

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

[rel=external]

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

<h2 rel="external">Attribute Equals</h2>

h2[rel=external] { color: red; }

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

<a href="http://perishablepress.com">Jeff Starr</a>
<a href="http://davidwalsh.name">David Walsh</a>
<a href="http://accidentalninja.net/">Richard Felix</a>

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

a[href=http://perishablepress.com] { color: red; }

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

input[type=text] { padding: 3px; }
input[type=radio] { float: left; }

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

[rel*=external]

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

<h2 rel="xxxexternalxxx">Attribute Contains</h2>

h2[rel*=external] { color: red; }

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

<div></div>
<div></div>
<div></div>

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

div[id*=post]  { color: red; }

[rel^=external]

<h2 rel="external-link yep">Attribute Begins</h2>

h2[rel^=external] { color: red; }

Пример из жизни может быть такой: скажем вам необходимо подсветить ссылки на дружественный вам сайт отличным от остальных ссылок цветом. =http://perishablepress.com] { color: red; }

[rel$=external]

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

<h2 rel="friend external">Attribute Ends</h2>

h2[rel$=external] { color: red; }

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

a[href$=#], a[href$=?] { color: red; }

[rel~=external]

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

<h2 rel="friend external sandwich">Attribute Space Separated</h2>

h2[rel~=external] { color: red; }

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

[rel|=external]

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

<h2 rel="friend-external-sandwich">Attribute Dash Separated</h2>

h2[rel|=external] { color: red; }

[title=one][rel^=external]

Очень важно, что для выборки элементов есть возможность использовать сразу несколько селекторов по атрибутам. =Important] { color: red; }

Поддержка браузерами

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

Class(класс) css селектор пример

Что такое класс(class) в css, как используются классы, примеры использования class ан сайте!

Один из наиболее часто употребляемых селекторов в css — это селектор «класса», разберёмся где и когда применяется, как обозначается класс

Скопировать ссылку

Как использовать два класса в css через запятую

Вопрос: «Как использовать два класса в css через запятую«
Ответ есть:

Если вам требуется для двух классов применить одинаковые стили, то это делается через запятую:

. class_first

,

.class_second

{

color: black;

border: 3px dotted red;

background: antiquewhite;

}

Возможно что:

У вас есть такой вопрос — как использовать сразу два класса в теге!?

Ответ тоже есть:

Два класса в теге можно использовать через пробел:

<div>привет мир!</div>

Скопировать ссылку

Class где находится

Еще один интересный вопрос — «Class где находится«?

Класс(выделено фиолетовым, имя класса выделено красным) находится в:

   1). В первом теге — если это двойной тег.
   2). В единственном теге — если это одинарный тег.

<div>привет мир!</div>

Где класс находится в стилизации? Стилизация класса может быть, либо:

   1). В теге style.
   2). Либо в файле file css.

Почему классы в html заключены в кавычки

Замечательный вопрос : «Почему классы в html заключены в кавычки«. ..
Ответ:

Класс может заключаться в двойные кавычки

class=»example»

Класс может заключаться в одинарные кавычки:

class=’example’

Либо вообще без кавычек:

class=example

Но только в том случае, если класс одинарный, как было показано выше. Вот так … второй класс не сработает:

class=example example_2

В коде вы увидите вот так(т.е. сработает первый класс, второй нет):

Теги :
Class селектор
что такое класс в css
зачем нужен class в html
class варианты использования

CSS Class Selector — GeeksforGeeks

Просмотреть обсуждение

Улучшить статью

Сохранить статью

• Уровень сложности: Базовый
• Последнее обновление: 11 окт, 2021

Посмотреть обсуждение

Улучшить статью

Сохранить статью

Селектор .class используется для выбора всех элементов, принадлежащих определенному атрибуту класса. Чтобы выбрать элементы с определенным классом, используйте символ точки (.), указывающий имя класса, т. е. он будет соответствовать элементу HTML на основе содержимого их атрибута класса. Имя класса в основном используется для установки свойства CSS для данного класса.

Синтаксис:  

 .class {
    // CSS-свойство
} 

Пример 1: В этом примере демонстрируется селектор класса для определенного элемента HTML.

HTML

Выходные данные:

Пример 2: В этом примере описывается имя класса, разделенное пробелами.

HTML

 p {
семейство шрифтов: Cambria, с засечками;
размер шрифта: xx-крупный;
} 

 
Делать или не делать... попыток нет.
 

 

<голова>
  <мета-кодировка="UTF-8">
   0">
  

<тело>
  
Делай или не делай... попыток нет.
  <дел>
    
Скоро в 2011 году
    
( в ближайший к вам театр )
  
  <таблица>
    

Правило, которое мы определили ранее, будет применяться к каждому экземпляру тега p в документе. Причина в том, что селектор не очень специфичен в отношении того, какие типы тегов p следует применить правило к. Чтобы описать эту ситуацию более формально, этот конкретный селектор говорят отсутствие специфичности . Это будет применяться к каждому тегу p без суеты. Иногда это то поведение, которое нам нужно. Большую часть времени нам понадобится немного больше контроля, и в следующих разделах объясняются подходы, которые мы используем для предоставления нам большего контроля над тем, как применяются наши стили.

Таргетинг по имени: селекторы классов и идентификаторов

Итак Пока мы видели только простой селектор типов, который применяет свои стили ко всем вхождениям тега p. В то время как селекторы типов, которые применяется только к определенному типу элемента, для многие типы визуальных изменений, которые вы хотите сделать, вы хотите использовать селекторы, которые можно широко применять к разным типам элементов. Чтобы помочь нам в этом, у нас есть класс . селекторы и селекторы id . Давайте посмотрим на них сейчас.

Селектор класса

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

 

Скоро в 2011 году
( в ближайший к вам театр )
 

Мы хотим применить синий цвет фона только ко второму элементу p. Первое, что мы сделаем, это отличим наш второй элемент p, дав ему имя. Мы дадим ему имя, установив для него атрибут класса со значением 9.0028 круто :

 <дел>
Скоро в 2011 году
( в ближайший к вам театр )
 

Если мы хотим стилизовать наш элемент cool , мы можем указать селектор класса, который напрямую нацелен на этот элемент:

 .cool {
  цвет фона: #AADCFF;
} 

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

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

 

  
Уно
  
Дос
  
Трес
  
Каторче
 

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

Селектор идентификаторов

Другой способ стилизовать элемент по имени — использовать селектор идентификаторов, где элемент, который мы хотим стилизовать, имеет атрибут id, установленный на одно значение:

 

  
Делай или не делай... попыток нет.
 

В приведенном выше фрагменте у нас есть элемент div с атрибутом id, установленным на космический корабль . Если мы хотим применить стиль только для этого конкретного элемента мы можем использовать селектор ID это выглядит следующим образом:

 #spaceship {
  цвет фона: #E6F8FF;
} 

Обратите внимание, что значение селектора равно #spaceship . Хэштег (#) важен, потому что он обозначает selector в качестве селектора на основе идентификатора и значение, следующее за ним он указывает идентификатор элемента, который мы хотим применить к этому правило к.

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

Вложенные селекторы

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

Давайте рассмотрим пример, где ваш HTML выглядит следующим образом:

Выполнить или же не... там нет попробуй.

  

<дел идентификатор = "главный заголовок">

 

Скоро Скоро в 2011 г.

 

( к театр около ты)

  

То, что мы хотим сделать, это только примените некоторые стили к тегам p (выделены зеленым), которые являются потомками тега div mainHeading. Тег p, который за пределами тега div mainHeading (выделено оранжевым цветом) должны оставаться нетронутыми.

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

<стиль>

р {

семейство шрифтов: Камбрия, с засечками;

размер шрифта: хх-большой;

}

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

Поскольку теги p, на которые мы хотим повлиять, находятся внутри div тег, мы можем изменить наш селектор как таковой:

<стиль>

раздел п {

семейство шрифтов: Камбрия, с засечками;

размер шрифта: хх-большой;

}

Обратите внимание, что наш селектор теперь указывает, что это правило применяется в любом месте вашего документа только тогда, когда тег p потомок тега div. Любые обычные теги p больше не будут получите удовольствие от удивительности, которую обеспечивает это правило.

Следует помнить о вложенных селекторах: просто потому, что ваш селектор говорит div р, это не означает, что это правило распространяется только на элемент p, который является прямым дочерним элементом div. Ваш div может иметь много уровней дочерних элементов перед элементом p встречается, но до тех пор, пока p попадает под путь div (он же потомок), у вас все хорошо.

Ниже приведен пример этого:

Скоро Скоро в 2011 г.

  <ул.>

   

<р>( к театр около ты)

   

 

Обратите внимание, что в этом примере второй элемент p фактически под элементом списка внутри неупорядоченного списка. Несмотря на его расстояние от элемента div, потому что этот тег p все еще потомок, правило стиля все еще применяется.

Пойдем немного дальше. Скажем, ограничение вашего стили для тегов p, которые являются потомками элемента div, еще слишком вольная. Вместо этого вы хотите применить свой стиль для тегов p, которые являются потомками div, идентификатор которого главнаяЗаголовок.

В этом случае, взяв один и тот же фрагмент HTML, вы увидели несколько секунды назад, вам не нужно делать ничего особенного, чтобы как выглядит ваш селектор. Вместо вашего селектора будучи div p, вы просто используете #mainHeading p вместо:

<стиль>

#mainHeading p {

семейство шрифтов: Камбрия, с засечками;

размер шрифта: хх-большой;

}

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

Вложенные селекторы (.

..снова!)

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

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

 

Я здесь, чтобы бросить тебя!

  <дел идентификатор = "контейнер" класс = "потрясающе">

    <дел идентификатор = "космический корабль">

<р class="awesome">Сделать или же не... там нет попробуй.

   

 

У вас есть три вложенных элемента div, и в самом низу эти divs - это тег p, содержащий некоторый текст. Как вы можете думаю, мы хотим стилизовать только этот тег p, и мы должны сделать только это через CSS. Другими словами, вы не можете изменить свой HTML и дайте вашему тегу p уникальный идентификатор и легко позаботьтесь о нем с одним селектором ID. Есть несколько способов достижения этого, и мы рассмотрим некоторые из этих способов.

Селекторы вложенных типов

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

<стиль>

делитель делитель п {

семейство шрифтов: Камбрия, с засечками;

размер шрифта: хх-большой;

}

Принимаются только теги p, потомки по крайней мере двух div. Это устраняет первый p, потому что он является потомком только одного div, но интересующий нас тег p срабатывает. Причина в том, что наш тег p с именем класса awesome является потомком три элемента div!

Селекторы вложенных идентификаторов и типов

Другой подход, который вы можете использовать, может быть:

Это правило будет применяться ко всем тегам p, которые являются потомками элемента, идентификатор которого — космический корабль. Это означает, что наш тег p будет затронут этим стилем, потому что это прямой потомок div, идентификатор которого — космический корабль.

Селекторы вложенных идентификаторов и классов

Последний пример, который мы увидим, это тот, в котором вы комбинируете оба селектор на основе идентификатора и класса в ваше правило:

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

Больше примеры рассматривать не будем, а то что есть увиденное до сих пор должно дать вам хорошее представление о том, как специально выделить элемент или набор элементов для применение стиля к. Пока у вас есть хороший визуализация DOM/иерархии элементов, которые вы хотите стилизовать, создав соответствующий селектор с правильная специфичность станет очень легкой после нескольких попыток!

Заключение

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

Есть вопрос? Пишите на форумы для быстрого ответа!

• Предыдущий артикул
• Следующая статья

11 селекторов CSS, которые вы должны знать. В CSS есть нечто большее, чем .class и #id… | Джонатан Саринг

В CSS есть нечто большее, чем селекторы .class и #id. Узнайте больше о полезных селекторах CSS с примерами.

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

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

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

Не стесняйтесь предлагать более полезные селекторы или методы в комментариях ниже (с полным форматированным объяснением), и я добавлю их в список. Наслаждайтесь 📝

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

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

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

 p { 
 background-color: yellow; 
 } 

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

 h2 { 
 text-align: center; 
 цвет: красный; 
 }h3 { 
 text-align: center; 
 цвет: красный; 
 }p { 
 text-align: center; 
 цвет: красный; 
 } 

Вы можете сделать это.

 h2, h3, p { 
 text-align: center; 
 цвет: красный; 
 } 

Селектор id — это еще один базовый селектор, который позволяет применять стиль ко всем указанным элементам с выбранным id. Естественно, это узкоспециализированный селектор, который превосходит более общие селекторы. Он использует #, за которым следует указанный идентификатор, чтобы применить правила стиля ко всем элементам с совпадающим идентификатором.

Выбор всех элементов с id dog выглядит так:

 #dog { 
 background-color: Purple; 
 } 

Эта простота — палка о двух концах, и ее не следует использовать слишком часто, так как последующая поддержка CSS может превратиться в кошмар. Поэтому лучше применять классы и более абстрактную логику, чем создавать множество идентификаторов #id.

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

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

 li.roomy { 
 margin: 2em; 
 } 

Селектор атрибутов CSS позволяет выбрать все элементы по имени или значению данного атрибута. Крис Койер приводит хороший пример, где эта строка HTML имеет атрибут rel со значением "friend" .

 
Дэвид Уолш
 

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

 h3[rel="friend"] { 
  цвет: фиолетовый;  
 } 

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

 input[type="checkbox"] { 
  цвет: фиолетовый;  
 } 

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

 а[href="https://blog.bitsrc.io"] { 
  цвет: фиолетовый;  
 } 

Последнее важное замечание: вы можете играть с операторами селектора, так что, например, «*=» на самом деле означает «выбрать, если следующее значение появляется где-либо внутри значения атрибута целевого элемента». Прочтите этот пост с плюсом.

Селектор потомков является первым из семейства комбинированных селекторов CSS.

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

Выбор всех элементов

, вложенных в элемента

, выглядит следующим образом.

 div h2 { 
 цвет фона: фиолетовый; 
 } 

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

элементов внутри

элементов, вы можете сделать это:

 ul li a { 
 background-color: Purple; 
 } 

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

 li .class { 
 цвет фона: фиолетовый; 
 } 

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

Например, если у вас есть

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

Выбор элементов

>, которые являются дочерними элементами элементов
, выглядит следующим образом.

 div > h2 { 
 цвет фона: фиолетовый; 
 } 

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

 div ~ p { 
 цвет фона: фиолетовый; 
 } 

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

, расположенные сразу после элементов

:

 div + p { 
 background-color: Purple; 
 } 

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

 селектор: псевдокласс { 
 свойство: значение; 
 } 

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

 div:hover { 
 background-color: blue; 
 } 

Или если ссылка уже была нажата ранее.

 /* непросмотренная ссылка */ 
 a:link { 
 color: #FF0000; 
 } 
 /* посещенная ссылка */ 
 a:посетили { 
 color: #00FF00; 
 } 
 

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

 input[type=radio]:checked { 
 border: 1px сплошной фиолетовый; 
 } 

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

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

Знакомство с селекторами псевдоклассов | CSS-Tricks

Селекторы псевдоклассов — это селекторы CSS, перед которыми стоит двоеточие. Вы, вероятно, хорошо знакомы с некоторыми из…

css-tricks.com

Псевдоэлемент CSS — это ключевое слово, добавляемое к селектору, которое позволяет вам стилизовать определенную часть выбранных элементов. Вот синтаксис.

 селектор::псевдоэлемент { 
 свойство:значение; 
 } 

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

Например, ::first-line можно использовать для оформления первой строки каждого

>.

 /* Первая строка каждого элемента 
. */ 
 p::first-line { 
 color: blue; 
 преобразование текста: верхний регистр; 
 } 

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

Звучит сложно? Это действительно не так. Например, следующий CSS выберет все элементы

, которые являются 7-м дочерним элементом

своих родительских элементов.

 li:nth-of-type(7) { 
 цвет: фиолетовый; 
 } 

Селектор :nth-child( n ) соответствует всем элементам, которые являются дочерними элементами n th, независимо от типа их родителей. Так, например, следующий CSS выберет все вторые дочерние элементы из всех 9.0053

элемента — независимо от типа.

 ul:nth-child(2) { 
 цвет: фиолетовый; 
 } 

Конечно, вы также можете объединить их вот так.

 div:nth-of-type(3) p:nth-of-child(2) { 
 цвет: фиолетовый; 
 }/* Обратите внимание, что это может не вернуть тот же результат, что и:div:nth-of-type(3) p:nth-of-type(2) { 
 color: Purple; 
 }/* Потому что в первом вы выбираете 2-го дочернего элемента любого типа в 3-м div, а во втором вы выбираете 2-й 
 в 3-м div.  

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

 * { 
 поля: 0; 
 заполнение: 0; 
 } 

См. также: «Использование селектора звездочек CSS для обнуления полей и отступов».

Но на самом деле селектор * соответствует всем элементам в DOM. На самом деле, вы уже используете селектор звезд, даже не подозревая об этом. Когда вы используете другие селекторы, такие как класс или элемент , они уже подразумевают селектор звезды. Так вот:

 ul {} 

Парсер действительно это видит.

 * ul {} 

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

 * { 
 поля: 0; 
 заполнение: 0; 
 граница: 0; 
 контур: 0; 
 } 

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

Совет. Почему бы не разместить в облаке библиотеку компонентов многократного использования?

При создании красивых компонентов в React используйте Bit to извлекайте и делитесь компонентами в облаке. Вы можете повторно использовать компоненты во всех своих проектах, синхронизировать изменения и делиться ими со своей командой. Очень полезно.

11 библиотек анимации JavaScript на 2019 год

Одни из лучших библиотек анимации JS и CSS.

blog.bitsrc.io

5 способов стилизации компонентов React в 2020 году

Разбираемся со стилями компонентов React в 2019 году в кратком, но подробном обзоре

blog.bitsrc.io

9 CSS в JS-библиотеках Знайте в 2019 году

Одни из лучших библиотек CSS в JavaScript для использования в вашем следующем приложении.

blog.bitsrc.io

Селектор класса в CSS

html

8 месяцев назад

от Anees Asghar

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

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

• Что такое селектор класса
• Базовый синтаксис селектора класса
• Как использовать селектор класса
• Как использовать селектор класса для некоторых конкретных элементов HTML

Давайте начнем это обсуждение с основного определения селектора класса:

Селектор класса в CSS

Селектор класса нацелен на элемент(ы) с определенным именем(ями) класса. Следующий синтаксис даст вам больше ясности о селекторе класса.

Синтаксис

Базовый синтаксис начинается с точки «.» за которым следует имя класса, которое означает, что это селектор класса.

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

Как использовать селектор классов CSS

Селектор классов CSS можно использовать для установки стиля некоторых конкретных элементов HTML.

Пример

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



   



   

Селектор класса CSS


   

Первый абзац


   

Второй абзац




В приведенном выше коде используются два селектора классов. Элемент

и первый элемент

используют один и тот же класс, поэтому будет реализован один и тот же стиль, в то время как второй элемент

будет оформлен по-разному:

Как использовать селектор классов CSS для определенных элементов HTML

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

На приведенном выше рисунке показано, как выбрать все элементы

с именем класса «стиль» и установить синий цвет фона.

Пример

В этом примере класс style1 указан для элементов

и

. Однако только элементы

, имеющие атрибут класса «style1», могут получить доступ к свойствам стиля style1, а элемент

останется без стиля.



   



   

Селектор класса CSS


   

Первый абзац


   

Второй абзац


< /body>

Вывод

Как реализовать несколько стилей в элементе HTML

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

Пример

В приведенном ниже коде первый абзац реализует свойства обоих классов стилей.







   

Селектор класса CSS


   

Первый абзац


   

Второй абзац


< /body>

Приведенный выше фрагмент кода сгенерирует следующий вывод:

Вывод подтверждает, что первый абзац использует свойства обоих классов «стиль» и «стиль1».

Заключение

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

Об авторе

Anees Asghar

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

Посмотреть все сообщения

Selectutorial: Селекторы классов

• Введение
• Комбинация селекторов класса и типа
• Объединение нескольких классов
• Классы не должны заменять элементы HTML
• Меньший класс
• Подумай перед уроком

---

Введение

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

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




>Это текст




Это текст





• class="big" >Элемент списка


• Элемент списка


• Список элемент





Древовидная диаграмма будет такой:

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

. big {размер шрифта: 110%; вес шрифта: полужирный; }

---

Объединение селекторов класса и типа

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

div.big { цвет: синий; }
тд.большой { цвет: желтый; }
label.big { цвет: зеленый; }
form.big { цвет: красный; }

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

Для этого можно использовать следующие правила:

.big {размер шрифта: 110%; } /* влияет на p и li */
p.big { вес шрифта: полужирный; }/* влияет только на p */

---

Объединение нескольких классов

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

>

.big { вес шрифта: полужирный; }
.indent { padding-left: 2em; }

---

Классы не должны заменять элементы HTML

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

Одним из примеров этого может быть оформление содержимого элемента

или

таким образом, чтобы оно выглядело как заголовок.

>Заголовок здесь

.heading
{
вес шрифта: полужирный;
размер шрифта: 140%;
цвет: #600;
}

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

или

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

Предпочтительным методом было бы использование:

Заголовок здесь

h3
{
вес шрифта: полужирный; /* на самом деле не требуется */
font-size: 140%;
цвет: #600;
}

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

> Заголовок здесь

h3.sidenav
{
вес шрифта: полужирный;
размер шрифта: 140%;
цвет: #600;
}

---

Меньше класса

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

. Все элементы в

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

. Вы должны стараться избегать ненужных разметка такая:

class="sidenav" >


class="sideheading" >Навигация по сайту>


class="sidelist" >

• class="sideitem" >Элемент списка


• class="sideitem" > class="sidelink" >Элемент списка


• class="sideitem" >Элемент списка






Вместо этого вы можете стилизовать все элементы внутри

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

class="sidenav" >


Навигация по сайту






• Элемент списка


• Элемент списка

< li>Элемент списка





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

. В приведенных ниже примерах используется комбинация селекторов классов и селекторов типов. При объединении они становятся селекторами потомков.

div.sidenav { blah } /* стили всего div */
div.sidenav h3 { blah } /* стили h3 внутри div */
div.sidenav ul { blah } /* стили ul внутри div */
div.sidenav li { blah } /* стили li внутри div */
div.sidenav li a { blah } /* стили a внутри li внутри div */

---

Подумай перед уроком

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

1. Существует ли существующий элемент HTML, который можно было бы использовать вместо него?
2. Есть ли класс или идентификатор выше по дереву документа, который можно было бы использовать?

Селекторы классов хорошо поддерживаются браузерами, соответствующими стандартам.

Дальнейшая информация

• Следует ли использовать идентификатор или класс?
Спецификация
• W3C CSS2: Селекторы классов
Таблица поддержки селекторов CSS2 DevEdge
• Таблица поддержки селекторов WestCiv

Селекторы идентификаторов »

Другие статьи и презентации Max Design
, связанные с webstandardsgroup. org

Руководство по недавно поддерживаемым современным селекторам псевдоклассов CSS — Smashing Magazine

• Чтение: 11 мин. Гиды, Браузеры, Специальные возможности
• Поделиться в Твиттере, LinkedIn

Об авторе

Стефани Эклз (Stephanie Eckles) — инженер-программист, ориентированный на интерфейс. Она является автором ModernCSS.dev, который предлагает современные решения старых проблем CSS. Она … Больше о Стефани ↬

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

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

Несмотря на то, что этот псевдокласс определен в Selectors Level 4, он уже довольно давно поддерживает кроссбраузерность. Псевдокласс any-link будет соответствовать якорной гиперссылке, если она имеет href . Это будет эквивалентно одновременному совпадению :link и :visited . По сути, это может уменьшить ваши стили на один селектор, если вы добавляете базовые свойства, такие как цвет , которые вы хотели бы применить ко всем ссылкам независимо от их статуса посещения.

 :любая ссылка {
  цвет синий;
  смещение подчеркивания текста: 0,05 em;
}
 

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

 :any-link {
  цвет: фиолетовый;
}
а {
  красный цвет;
}
 

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

:focus-visible

Могу поспорить, что одним из наиболее распространенных нарушений специальных возможностей в Интернете является удаление контура на интерактивных элементах, таких как ссылки, кнопки и формы ввода, для их состояния :focus . Одна из основных целей этого контура — служить визуальным индикатором для пользователей, которые в основном используют клавиатуру для навигации. Критическое состояние видимого фокуса в качестве инструмента для поиска пути, когда эти пользователи используют вкладку в интерфейсе, и чтобы помочь усилить то, что является интерактивным элементом. В частности, видимый фокус описан в Критерии успеха WCAG 2.4.11: Внешний вид фокуса (минимум).

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

Примечание : Дополнительные сведения см. в рабочем проекте спецификации :focus-visible .

Последние версии браузеров Firefox и Chromium, похоже, теперь обрабатывают :focus-visible при вводе формы в соответствии со спецификацией, в которой говорится, что UA должен удалить :focus стили, когда :focus-visible соответствует. Safari еще не поддерживает :focus-visible , поэтому нам нужно убедиться, что стиль :focus включен в качестве запасного варианта, чтобы избежать удаления контура для доступности.

Больше после прыжка! Продолжить чтение ниже ↓

При наличии кнопки и ввода текста со следующим набором стилей посмотрим, что произойдет:

 input:focus,
кнопка: фокус {
  контур: 2 пикселя сплошного синего цвета;
  смещение контура: 0,25 em;
}
ввод: фокус-видимый {
  контур: 2px сплошной прозрачный;
  цвет границы: синий;
}
кнопка: фокус: не (: фокус-видимый) {
  контур: нет;
}
кнопка: фокус видимый {
  контур: 2px сплошной прозрачный;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px синий;
}
 

Chromium и Firefox

• input
  Правильное удаление стилей :focus , когда элементы сфокусированы с помощью мыши, в пользу :focus-visible , что приводит к изменению border-color и скрытию контура
  3 при вводе с клавиатуры
• button
Не только использует :focus-visible без дополнительного правила для button:focus:not(:focus-visible) , которое удаляет контур на : Focus , но позволит увидеть Box-Shadow только на входе клавиатуры

Safari

• Вход
Продолжается с использованием только : FOCUE
• Button 4443: FOCUS
• Button 44444444444444444444444444444444444440544054405440544054405440544054405440544054405440544054405440544054405440544054405440544054405440544. чтобы теперь частично учитывать намерение :focus-visible на кнопке, скрывая стили :focus при нажатии, но по-прежнему показывая стили :focus при взаимодействии с клавиатурой

Итак, на данный момент рекомендуется продолжать включать стили :focus , а затем постепенно расширять до использования :focus-visible , что позволяет демонстрационный код. Вот вам CodePen для продолжения тестирования:

См. Pen [Тестирование приложения :focus-visible] (https://codepen.io/smashingmag/pen/MWJZbew) Стефани Эклз.

См. приложение Pen Testing :focus-visible от Stephanie Eckles.

:фокус внутри

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

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

 .form-group:focus-within label {
  цвет синий;
}
 

Это приводит к тому, что метка становится синей, когда ввод находится в фокусе.

Эта демонстрация CodePen также включает добавление схемы непосредственно в контейнер .form-group :

См. Pen [Тестирование приложения :focus-within] (https://codepen.io/smashingmag/pen/xxgmREq) Стефани Эклз.

См. приложение Pen Testing :focus-within от Стефани Эклс.

:is()

Также известный как «сопоставление любому» псевдоклассу, :is() может принимать список селекторов, с которыми выполняется попытка сопоставления. Например, вместо того, чтобы перечислять стили заголовков по отдельности, вы можете сгруппировать их в селекторе :is(h2, h3, h4) .

Несколько уникальных поведений о списке селекторов :is() :

• Если селектор в списке недействителен, правило будет по-прежнему соответствовать допустимым селекторам. Дано :is(-ua-invalid, артикль, p) правило будет соответствовать артикулу и р .
• Вычисленная специфичность будет равна специфичности переданного селектора с наивысшей специфичностью. Например, :is(#id, p) будет иметь специфичность #id — 1.0.0 — тогда как :is(p, a) будет иметь специфичность 0.0.1.

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

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

 :is(h2, h3, h4) {
  высота строки: 1,2;
}
: is (h3, h4): не (: первый ребенок) {
  поле сверху: 2em;
}
 

В этом примере (который исходит из стилей документа в моем проекте SmolCSS), имея большее line-height , унаследованный от базовых стилей или отсутствие margin-top , на самом деле не является проблемой для не поддерживающих браузеров. Это просто далеко от идеала. Чего вы не хотели бы использовать :is() , так это важных стилей макета , таких как Grid или Flex, которые значительно контролируют ваш интерфейс.

Кроме того, при привязке к другому селектору вы можете проверить, соответствует ли базовый селектор селектору-потомку в пределах :is() . Например, следующее правило выбирает только те абзацы, которые являются прямыми потомками статей. Универсальный селектор используется как ссылка на p Базовый селектор.

 p:is(статья > *)
 

Для наилучшей текущей поддержки, если вы хотите начать использовать ее, вы также захотите удвоить стили , включив повторяющиеся правила, используя :-webkit-any() и :matches() . Не забудьте сделать эти индивидуальные правила, иначе даже поддерживающий браузер их выбросит! Другими словами, включите все следующее:

 :matches(h2, h3, h4) { }
:-webkit-любой (h2, h3, h4) { }
: есть (h2, h3, h4) { }
 

Здесь стоит упомянуть, что наряду с самими новыми селекторами есть обновленная версия @supports , которая представляет собой @supports selector . Это также доступно как @supports not selector .

Примечание : В настоящее время (из современных браузеров) только Safari не поддерживает это правило at.

Вы можете проверить наличие поддержки :is() с помощью чего-то вроде следующего, но на самом деле вы потеряете поддержку Safari, поскольку Safari поддерживает :is() , но не поддерживает @supports selector .

 @supports selector(:is(h2)) {
  : есть (h2, h3, h4) {
    высота строки: 1,1;
  }
}
 

:where()

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

Рассмотрим следующий набор стилей img . Используя :where() , даже с селектором более высокой специфичности специфичность остается нулевой. Как вы думаете, в следующем примере граница какого цвета будет у изображения?

 : где (статья img: не (: первый ребенок)) {
    граница: 5 пикселей сплошного красного цвета;
}
:где(статья) img {
  граница: 5px сплошной зеленый цвет;
}
картинка {
  граница: 5 пикселей сплошного оранжевого цвета;
}
 

Первое правило имеет нулевую специфичность, так как полностью содержится в :where() . Таким образом, непосредственно против второго правила выигрывает второе правило. Представляя селектор только элемента img в качестве последнего правила, он выиграет благодаря каскаду. Это связано с тем, что оно будет вычисляться с той же специфичностью, что и правило :where(article) img , поскольку часть :where() не увеличивает специфичность.

Использование :where() вместе с резервными вариантами немного сложнее из-за функции нулевой специфичности, так как эта функция, вероятно, является причиной, по которой вы хочет, чтобы использовал его вместо :is() . И если вы добавите резервные правила, они, скорее всего, превзойдут :where() из-за самой их природы. И общая поддержка у него на лучше, чем у селектора @supports , поэтому попытка использовать его для создания отката вряд ли принесет большую выгоду (если вообще даст). По сути, помните о невозможности правильно создать запасные варианты для :where() и тщательно проверьте свои собственные данные, чтобы определить, безопасно ли начинать использовать для вашей уникальной аудитории.

Вы можете дополнительно протестировать :where() с помощью следующего CodePen, который использует селекторы img , указанные выше: smashingmag/pen/jOyXVMg) Стефани Эклз.

См. Pen Testing :where() специфичность Стефани Эклс.

Расширенный

:not()

Базовый селектор :not() поддерживается начиная с Internet Explorer 9. Но селекторы уровня 4 улучшают :not() , разрешив ему принимать список селекторов, точно так же, как :is() и :where() .

Следующие правила дают тот же результат в поддерживаемых браузерах:

 article :not(h3):not(h4):not(h5) {
  нижняя граница: 1.5em;
}
статья: не (h3, h4, h5) {
  нижняя граница: 1.5em;
}
 

Способность :not() принимать список селекторов отлично поддерживается современными браузерами.

Как мы видели с :is() , расширенный :not() также может содержать ссылку на базовый селектор как на потомка с использованием * . Этот CodePen демонстрирует эту способность, выбирая ссылки, которые являются , а не потомками nav .

См. Pen [Тестирование :not() с помощью селектора потомков](https://codepen.io/smashingmag/pen/BapvQQv) Стефани Эклс.

См. Pen Testing :not() с селектором потомков Стефани Эклс.

Бонус : предыдущая демонстрация также включает пример объединения :not() и :is() для выбора изображений, которые не являются соседними элементами h3 или h4 .

Предлагается, но «под угрозой» —

:has()

Последний псевдокласс, который является очень захватывающим предложением, но не имеет текущего браузера, реализующего его даже экспериментальным способом, — это :has() . На самом деле, он указан в редакционном черновике Selector Level 4 как «находящийся под угрозой», что означает, что он испытывает трудности с завершением его реализации, и поэтому он может исключить из рекомендации.

В случае реализации :has() , по сути, это был бы «родительский селектор», о котором мечтали многие специалисты по CSS. Это будет работать с логикой, аналогичной комбинации :focus-within и :is() с селекторами потомков, где вы ищете присутствие потомков , но применяемый стиль будет применяться к родительскому элементу.

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

 навигация {
  набивка: 0,75 бэр 0,25 бэр;
навигация: имеет (кнопка) {
  набивка-верх: 0,25 бэр;
  прокладка-дно: 0,25 бэр;
}
 

Опять же, это , а не , который в настоящее время реализован в любом браузере даже экспериментально — но об этом интересно подумать! Робин Рендл предоставил дополнительную информацию об этом будущем селекторе на CSS-Tricks.

Почетное упоминание с уровня 3:

:пусто

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

Правило p:пусто будет соответствовать

, но не

Hello

.

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

 .search-results:empty {
  дисплей: нет;
}
 

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

Добавить комментарий Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарий *

Имя *

Email *

Сайт