Селектор класса css – Селекторы тега, класса (class), Id и универсальные, а так же селекторы атрибутов в современном CSS

Leave a Comment / Css / By /

Содержание

class | CSS селектор

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

Описание

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


.myClass { color: blue; }

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


<p>Текст абзаца.</p>

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

<p>Текст абзаца.</p>

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

При выборе имени класса необходимо учитывать следующие правила:

  • Все имена классов должны начинаться с точки. С её помощью браузеры находят селекторы классов в таблице стилей
  • В имени класса разрешается использовать следующие символы: буквы алфавита, числа, дефисы и знаки подчёркивания
  • Имя класса после точки всегда должно начинаться с буквы алфавита
  • Имена классов чувствительны к регистру символов, например: .Menu и .menu это имена двух разных классов
Примечание: если одинаковые значения атрибута class прописаны к нескольким разным элементам, но только к одной группе из них нужно применить дополнительный стиль, то перед именем класса нужно написать дополнительный селектор, который будет информировать к каким элементам применять заданный стиль: 
span.alert { font-weight: bold; }
в этом случае только текст в элементах span со значение alert атрибута class будет выделен жирным шрифтом, остальные элементы с данным классом будут игнорировать этот стиль.
Пример:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Пример</title>
    <style>
      .myclass { color: blue; }
    </style>
  </head>

  <body>
    <h2> Добро пожаловать! </h2>

    <p> Меня зовут Арни. </p>
    <p> Я играю в онлайн игры. </p>
    <p> Моего кота тоже зовут Арни. </p>

  </body>
</html>
Результат данного примера:

Добро пожаловать!

Меня зовут Арни.

Я играю в онлайн игры.

Моего кота тоже зовут Арни.

CSS - Селекторы | ИТ Шеф

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

Что такое CSS селекторы?


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

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

Пример CSS правила:


p {
  text-align: center;
  font-size: 20px;
}

В этом CSS правиле, p — это селектор, в данном случае — это селектор элемента. Это CSS правило устанавливает стили (CSS свойства, описанные в нём) для всех элементов p на странице.

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

Базовые селекторы

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

Селектор по элементу (тегу)

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

Синтаксис: имяТега

Пример задания правила для всех элементов p на странице:


/* селектор p выберет все элементы p на странице */
p {
  padding-bottom: 15px;
}

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

Селектор по классу предназначен для выбора элементов по классу (значению атрибута class).

Синтаксис: .имяКласса

Пример задания правила для всех элементов, имеющих класс center:


/* селектор .center выберет все элементы, имеющие класс center */
.center {
  text-align: center;
}

Селектор по идентификатору (id)

Селектор по идентификатору предназначен для выбора элемента по идентификатору (значению атрибута id).

Синтаксис: #имяИдентификатора

Пример задания правила для элемента, имеющего в качестве значения атрибута id значение footer:


/* селектор #footer выберет элемент, имеющий идентификатор footer */
#footer {
  height: 50px;
  margin-top: 20px;
}

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

Универсальный селектор (селектор звёздочка) предназначен для выбора всех элементов.

Синтаксис: *

Пример задания правила для всех элементов на странице:


/* селектор * выберет все элементы на странице */
* {
  margin: 0;
  padding: 0;
}

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

Селекторы по атрибуту предназначены для выбора элементов по имени атрибута и (или) его значению.

Типы селекторов по атрибуту:

  • [attr] – по имени атрибута;
  • [attr=value] – по имени и значению атрибута;
  • [attr^=value] – по имени и значению, с которого оно должно начинаться;
  • [attr|=value] – по имени атрибута и его значению, которое равно value или начинается со value-;
  • [attr$=value] – по имени атрибута и значению, на которое оно должно заканчиваться;
  • [attr*=value] – по указанному атрибуту и значению, которое должно содержать value;
  • [attr~=value] – по имени атрибута и значению, которое содержит value отделённое от других с помощью пробела.
[attr]

Пример задания правила для всех элементов на странице, имеющих атрибут target:


/* селектор [target] выберет все элементы на странице, имеющих атрибут target */
[target] {
  background-color: red;
}
[attr=value]

Пример задания правила для всех элементов на странице, имеющих атрибут rel со значением nofollow:


/* селектор [rel="nofollow"] выберет все элементы на странице, имеющих атрибут rel со значением nofollow */
[rel="nofollow"] {
  background-color: green;
}
[attr^=value]

Пример задания правила для всех элементов на странице, имеющих атрибут class, значение которого начинается с col:


/* селектор [class^="col"] выберет все элементы на странице, имеющих атрибут class, значение которого начинается с col */
[class^="col"] {
  background-color: yellow;
}
[attr|=value]

Пример задания правила для всех элементов на странице, имеющих атрибут class, значение которого равно test или начинается с test- (т.е. с обязательным дефисом, после которого идёт остальное содержимое значения):


/* селектор [class|="test"] выберет все элементы на странице, имеющих атрибут class, значение которого равно test или начинается с test- */
[class|="test"] {
  background-color: orange;
}
[attr$=value]

Пример задания правила для всех элементов на странице, имеющих атрибут class, значение которого заканчивается на color:


/* селектор [class$="color"] выберет все элементы на странице, имеющих атрибут class, значение которого заканчивается на color */
[class$="color"] {
  background-color: yellow;
}
[attr*=value]

Пример задания правила для всех элементов на странице, имеющих атрибут href, значение которого содержит подстроку youtu.be (например будет выбран элемент, если атрибут href у него равен https://youtu.be/TEOSuiNfUMA):


/* селектор [href*="youtu.be"] выберет все элементы на странице, имеющих атрибут href, значение которого содержит youtu.be */
[href*="youtu.be"] {
  background-color: green;
}
[attr~=value]

Пример задания правила для всех элементов на странице, имеющих атрибут data-content, значение которого содержит news, отделённое от других с помощью пробела (например будет выбран элемент, если у него атрибут data-content равен hot-news news news-football):


/* селектор [data-content~="news"] выберет все элементы на странице, имеющих атрибут data-content, значение которого содержит news, отделённое от других с помощью пробела */
[data-content~="news"] {
  background-color: brown;
}

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

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

Псевдоклассы — это дополнение к основному селектору, которое позволяет выбрать элемент в зависимости от его особого состояния. Добавляется он к селектору c помощью символа :, т.е. так селектор:псевдокласс.

Псевдоклассы для выбора элементов в зависимости от их состояния

К этой группе псевдоклассов можно отнести псевдоклассы: :link, :visited, :hover, :active и :focus.

Псевдоклассы :link и :visited предназначены исключительно для ссылок (элементов a с атрибутом href).

Псевдоклассы :hover, :active и :focus могут применяться не только к ссылкам, но и к другим элементам.

Псевдокласс :link

Псевдокласс :link предназначен для выбора не посещённых ссылок.

Селектор класса - Xiper.net

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

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

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

  • Выполняемая задача — выбор всех элементов по имени класса (по значению атрибута 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 – JediCSS

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

  • основные селекторы,
  • составные,
  • селекторы атрибутов,
  • псевдоклассы,
  • псевдоэлементы.

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

Селектор типа

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

h2 {
    font-size: 1.875em;
    line-height: 1.075;
}

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

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

.article-title {
    color: red;
}

.order-title {
    color: blue;
}

Атрибутом class определяется элемент, к которому применится стиль. В значении атрибута точка не нужна:

<h2>My cool article</h2>
<h2>My cool order</h2>

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

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

Как и селектор класса, привязывается к элементу по имени. Определяется диезом:

#element-id {
    color: red;
}

Атрибутом id определяется элемент, к которому применится стиль:

<h2>My cool article</h2>

У стилей идентификатора наивысший приоритет.

Значения стилей id перебьют значения класса, вне зависимости от порядка записи в CSS. Можете поменять местами, результат не изменится:

#element-id {
    color: red;
}

.page-title {
    color: blue;
}

Порядок записи атрибутов не имеет значения. Текст будет красным.

<h2>My cool page</h2>

Имя идентификатора уникальное

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

Неправильно:

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

Правильно:

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

Популярно ошибочное мнение, что через id стили присваиваются «одноразовым» блокам: шапке, логотипу или подвалу.

#site-header {...}
#site-logo {...}
#site-footer {...}

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

  1. Айди может быть только один — это уникальное значение.
  2. Шапка на сайте только одна, значит это уникальный элемент.
  3. Получается, шапке стили напишем через идентификатор, ведь они больше нигде не будут использоваться.

Внедрять id для декорации элементов — признак дилетантской вёрстки. Не используйте #ID в CSS. Используйте его по прямому назначению: для идентификации полей ввода, якорных ссылок или яваскрипта.

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

Применяется ко всем элементам на странице. Следующая запись в таблице стилей добавит каждому элементу красную рамку:

* {
    border: solid 1px red;
}

Я знаю только одно практическое применение этому селектору — задать всем элементам на сайте border-box:

*,
*::before,
*::after {
    box-sizing: border-box;
}

Бытует мнение, что использование уникального селектора сильно нагружает браузер. Но в любом файле CSS есть более «тормозные» конструкции, нежели звёздочка.

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

Родственные селекторы | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 5.0+ 9.2+ 3.0+ 1.0+ 1.0+ 1.0+

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Родственные селекторы по своему поведению похожи на соседние селекторы (запись вида E + F), но в отличие от них стилевые правила применяются ко всем близлежащим элементам. К примеру, для селектора h2~p стиль будет применяться ко всем элементам <p>, располагающихся после заголовка <h2>. При этом <h2> и <p> должны иметь общего родителя, так что если <p> вставить внутрь <div>, то стили применяться уже не будут.

Здесь красный цвет текста будет установлен для всех абзацев.

h2 ~ p { color: red; }
<h2>Заголовок</h2>
<p>Абзац 1</p>
<p>Абзац 2</p>

Здесь красный цвет текста будет установлен для первого и третьего абзацев. Ко второму абзацу стиль не применяется, поскольку <h2> и <p> не имеют общего родителя.

h2 ~ p { color: red; }
<h2>Заголовок</h2>
<p>Абзац 1</p>
 <div><p>Абзац 2</p></div>
<p>Абзац 3</p>

Синтаксис

E ~ F { Описание правил стиля }

Для управления стилем родственных элементов используется символ тильды (~), он добавляется между двумя селекторами E и F. Пробелы вокруг тильды не обязательны. Стиль при такой записи применяется к элементу F в том случае, если он имеет того же родителя, что и элемент E и следует сразу после него.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE htm>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы</title>
  <style>
   img {
    display: none;
   }
   #switch:checked ~ img {
    display: block;
   }
  </style>
 </head>
 <body>
  <form>
   <input type="checkbox"> 
   <label for="switch">Показать картинки</label>
    <img src="images/thumb1.jpg" alt="">
    <img src="images/thumb2.jpg" alt="">
    <img src="images/thumb3.jpg" alt="">
  </form>
 </body>
</html>

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

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

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