class | CSS селектор
Поддержка браузерами
Описание
CSS селектор класс (class) применяет стиль ко всем элементам с указанным классом. Он определяется при помощи произвольного имени, перед которым ставится точка:
.myClass { color: blue; }
После того, как вы определили в таблице стилей селектор класса, вы можете с помощью атрибута class указать имя класса у тех элементов, к которым нужно применить данный стиль. Ставить точку перед именем класса в значении атрибута не нужно:
<p>Текст абзаца.</p>
В атрибуте class в качестве значения может быть указан не один, а несколько классов, в этом случае имена классов должны быть разделены пробелами, порядок следования имён классов не имеет значения.
<p>Текст абзаца.</p>
При указании нескольких классов, следует учитывать тот факт, что они могут содержать одинаковые свойства, но с разными значениями, в этом случае для элемента будет установлено значение свойства того класса, который описан в CSS-коде ниже остальных.
При выборе имени класса необходимо учитывать следующие правила:
- Все имена классов должны начинаться с точки. С её помощью браузеры находят селекторы классов в таблице стилей
- В имени класса разрешается использовать следующие символы: буквы алфавита, числа, дефисы и знаки подчёркивания
- Имя класса после точки всегда должно начинаться с буквы алфавита
- Имена классов чувствительны к регистру символов, например: .Menu и .menu это имена двух разных классов
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 {...}
Попробуем воспроизвести ход мыслей, из-за которых рождается такое решение:
- Айди может быть только один — это уникальное значение.
- Шапка на сайте только одна, значит это уникальный элемент.
- Получается, шапке стили напишем через идентификатор, ведь они больше нигде не будут использоваться.
Внедрять 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>
В данном примере все изображения изначально скрыты, но отображаются если поставить в поле формы галочку.