Селекторы CSS - полное руководство с примерами. Селекторы CSS
Поскольку мы не хотим стилизовать все наши элементы HTML одновременно, нам требуется возможность выбрать подмножество этих элементов.
Селекторы CSS определяют, к каким элементам мы хотим применить стиль.
Базовые селекторы тегов
Нацелиться на базовые теги HTML легко: просто используйте имя тега.
Есть прямая связь между именем тега HTML и используемым селектором CSS.
Классы
Учитывая, что мы, вероятно, не желаем стилизовать все абзацы или все заголовки одинаково, нам надо их различать.
Из всех атрибутов HTML атрибут class является наиболее важным для CSS. Он позволяет определить группу элементов HTML, на которые мы можем точно нацелиться. Просто поставьте точку перед именем класса который вы хотите использовать:
Date { color: red; }
С другой стороны есть атрибут HTML class со значением date . Он должен совпадать с именем класса CSS.
Вы можете использовать любое имя для вашего класса, но оно не должно начинаться с цифры.
Селектор класса .date будет нацелен на все элементы HTML с атрибутом class="date" . Таким образом, следующие элементы HTML все будут стилизованы:
Мероприятие произойдёт в субботу.
Имейте в виду, что имя тега не важно , учитывается только атрибут class .
Идентификаторы
Можно также использовать атрибут id в вашем HTML и определить его в вашем CSS с помощью решётки:
#tagline{ color: orange;}
Этот заголовок будет оранжевым.
Идентификаторы похожи на классы, так как они тоже основаны на атрибуте HTML.
Пример
Объединение селекторов
Давайте воспользуемся нашим предыдущим примером, в котором мы хотим сделать наши даты красными:
Мероприятие произойдёт в субботу.
Если мы захотим вместо этого, чтобы наши даты внутри отображались синим цветом? Мы можем добавить следующее правило CSS:
Em.date { color: blue; }
em.date объединяет в себе:
- селектор тега em ;
- селектор класса .date .
Он будет применяться только к элементам . Это не повлияет на другие .date или .
Иерархия селекторов
Пробел в селекторе определяет отношение предок/потомок. Скажем, мы хотим, чтобы ссылки в нашем заголовке были красного цвета:
Header a { color: red; }
Псевдоклассы
Элементы HTML могут иметь разные состояния. Наиболее распространённый случай - когда вы наводите курсор на ссылку. В CSS возможно применить другой стиль, когда происходит такое событие.
Псевдоклассы привязаны к обычным селекторам и начинаются с двоеточия.
Последнее обновление: 21.04.2016
Определение стиля начинается с селектора. Например:
Div{ width:50px; /* ширина */ height:50px; /* высота */ background-color:red; /* цвет фона */ margin: 10px; /* отступ от других элементов */ }
В данном случае селектором является div . Ряд селекторов наследуют название форматируемых элементов, например, div, p, h2 и т. д. При определении такого селектора его стиль будет применяться ко всем элементам соответствующих данному селектору. То есть выше определенный стиль будет применяться ко всем элементам
Селекторы CSS
Здесь на странице 3 элемента div, и все они будут стилизованы:
Классы
Иногда для одних и тех же элементов требуется различная стилизация. И в этом случае мы можем использовать классы.
Для определения селектора класса в CSS перед названием класса ставится точка:
RedBlock{ background-color:red; }
Название класса может быть произвольным. Например, в данном случае название класса - "redBlock". Однако при этом в имени класса разрешается использовать буквы, числа, дефисы и знаки подчеркивания, причем начинать название класса должно обязательно с буквы.
Также стоит учитывать регистр имен: названия "article" и "ARTICLE" будут представлять разные классы.
После определения класса мы можем его применить к элементу с помощью атрибута class . Например:
Определим и используем несколько классов:
Классы CSS
Идентификаторы
Для идентификации уникальных на веб-станице элементов используются идентификаторы, которые определяются с помощью атрибутов id. Например, на странице может быть головной блок или шапка:
Определение стилей для идентификаторов аналогично определению классов, только вместо точки ставится символ решетки #:
Однако стоит заметить, что идентификаторы в большей степени относятся к структуре веб-странице и в меньшей степени к стилизации. Для стилизации преимущественно используются классы, нежели идентификаторы.
Универсальный селектор
Кроме селекторов тегов, классов и идентификаторов в css также есть так называемый универсальный селектор , который представляет знак звездочки (*). Он применяет стили ко всем элементам на html-странице:
*{ background-color: red; }
Стилизация группы селекторов
Иногда определенные стили применяются к целому ряду селекторов. Например, мы хотим применить ко всем заголовкам подчеркивание. В этом случае мы можем перечислить селекторы всех элементов через запятую:
CSS3
Селекторы
Группа селекторов
Селекторы
Группа селекторов
Некоторый текст...
Группа селекторов может содержать как селекторы тегов, так и селекторы классов и идентификаторов, например:
H1, #header, .redBlock{ color: red; }
Селектор в CSS — это указатель на элемент или группу элементов, к которым будут применяется правила стилей. Существуют следующие виды селекторов:
1. Селекторы по тэгам : h1
2. Селектор по id : #main
3. Селекторы по классам : .hidden
4. Селектор по нескольким классам
Записываются слитно без пробелов. Селекторы удовлетворяющие одновременно сразу нескольким условиям (логическое “И”). Стили будут применяться ко всем элементам, которые одновременно имеют и класс.hidden и класс.closed .
Hidden.closed
5. Контекстные селекторы
Разделяются пробелом. Такие селекторы используют для того, чтобы применить стили к элементу, только если он вложен в нужный элемент.
P strong ul .selected .header .menu a
6. Соседние селекторы
Выделяет последующий элемент. Записываются с помощью знака + . Читается как: применить свойства к селектор2 который должен быть сразу после селектор1 .
Стили применяются к элементу, подходящему под селектор2 , только если перед ним расположен элемент, подходящий под селектор1 .
... .green + .selected {}
В примере.green + .selected применит стили ко второму элементу, т.к. перед ним есть элемент с классом.green . Селектор.green + li тоже применит стили ко второму элементу, а селектор.selected + .green не сработает.
7. Родственные селекторы
Выделяет последующие элементы. Похожи на предыдущий, но с тем различием, что выбираются все следующие элементы , а не только первый элемент.
- item
Selected too
Not selected ... ul ~ p {}В данном примере будут выбраны все элементы p, идущие за ul. В то время, как при использовании селектора ul + p будет выбран только первый элемент.
8. Дочерние селекторы
Записываются с помощью знака > и распространяются только на элементы первого уровня вложенности. На элементы вложенные в другие элементы не распространяются.
Ul > li {}
В случае контекстных селекторов они влияют на всех потомков (например если задать ul li) что не всегда удобно. Дочерние селекторы позволяют задать стили только для элементов первого уровня вложенности.
ul > li означает то же, что и ul li , но выбираются только li первого уровня вложенности, которые напрямую являются вложенными в ul. На li вложенные в другие дочерные li элементы, правила уже не будут действовать.
9. Селекторы атрибутов
Чаще всего используются при работе с формами. Селекторы атрибутов записываются с использованием квадратных скобок элемент[атрибут] .
Примеры селекторов атрибутов:
Input input div a a a a
В примере выше ~ позволяет выделить определенный атрибут из списка атрибутов, разделенных запятой, например из:
10. Глобальный селектор
Селектор * выберет все элементы. Его также можно использовать для выделения дочерних элементов:
* { margin: 0; padding: 0; } .content * { outline: none; }
11. Псевдоклассы
Примеры псевдоклассов:
A:link a:visited a:active a:hover input:checked .clearfix:after {} div:not(#container) p::first-line p::first-letter
Псевдокласс отрицания:not бывает очень полезным. Например, когда необходимо выбрать все div, за исключением того, который имеет id container.
CSS содержит правила стиля, которые интерпретируются браузером, а затем применяются к соответствующим элементам вашего документа. Правило стиля состоит из трех частей:
- Селектор
- это HTML-тег, к которому будет применяться стиль. Это может быть любой тег, например,
или
и т.д.
- Свойство - это тип атрибута HTML-тега. Проще говоря, все атрибуты в HTML преобразуются в свойства CSS. Ими могут быть цвета, границы, отступы и т.д.
- Значение - задается свойству. Например, свойство цвета может иметь значение green, #008000 и т.д.
Синтаксис селекторов в CSS следующий:
Селектор { свойство: значение }
Пример. Вы можете задать границу таблицы следующим образом:
Table { border: 2px solid #FF8C00; }
Здесь синтаксис селектора такой: table - это селектор, а border - свойство, а 2px solid #FF8C00 - значение этого свойства.
Вы можете задавать селекторы различными способами, как Вам будет удобно. Ниже представлены виды селекторов.>
Стандартные селекторы
Это тот же самый селектор, который Вы видели выше. Опять же, еще один пример, чтобы дать цвет всем заголовкам первого уровня:
H1 { color: #8B4513; }
Универсальные селекторы
Вместо того, чтобы выбирать элементы определенного типа, универсальный селектор вполне просто соответствует имени любого типа элемента:
* { color: #808080; }
Это правило отображает в нашем документе содержимое каждого элемента в сером цвете.
Селекторы потомков или вложенные селекторы
Предположим, Вы хотите применить правило стиля к определенному элементу только тогда, когда оно находится внутри определенного элемента, то в этом Вам помогут вложенные селекторы или селекторы потомков. Как показано в следующем примере, правило стиля будет применяться к элементу только тогда, когда оно находится внутри тега
- .
Ul em { color: #CD5C5C; }
Селекторы класса
Вы можете задать правила стиля для элементов на основе атрибута class. Все элементы, имеющие этот класс, будут отформатированы в соответствии с определенным правилом.
Blue { color: #0000FF; }
class="blue" . Вы можете сделать селектор класса немного более конкретным. Например:
H1.blue { color: #0000FF; }
с атрибутом class="blue" .
Вы можете применить к одному элементу несколько селекторов класса. Рассмотрим следующий пример:
Этот абзац будет оформлен классами center и bold .
ID селекторы
Вы можете задать правила стиля для элементов на основе атрибутa id. Все элементы, имеющие этот идентификатор, будут отформатированы в соответствии с определенным правилом.
#blue { color: #0000FF; }
Это правило отображает в нашем документе содержимое в синем цвете для каждого элемента с атрибутом id="blue" . Вы можете сделать id селектор немного более конкретным. Например:
H1#blue { color: #0000FF; }
Это правило отображает содержимое в синем цвете только для элементов
с атрибутом id="blue" .
Истинная мощность id селекторов - это когда они используются в качестве основы для селекторов-потомков, например:
#blue h2 { color: #0000FF; }
В этом примере все заголовки второго уровня будут отображаться в синем цвете, когда они будут находиться в тегах с атрибутом id="blue" .
Дочерние селекторы
Вы уже знаете селекторы потомков. Существует еще один тип селектора, который очень похож на селекторы потомков, но имеет другую функциональность, это дочерний селектор. Рассмотрим следующий пример:
Body > p { color: #0000FF; }
Это правило будет отображать все абзацы в синем цвете, если они являются прямым дочерним элементом
. Другие абзацы, помещенные внутри других элементов типаилиСоседние селекторы
HTML-элементы, идущие друг за другом, называются соседними. Рассмотрим следующий пример:
Strong + em { color: #0000FF; }
Это правило будет отображать содержимое тега в синем цвете, если он идет после элемента . Другие теги , идущие не после тега , не будут иметь никакого эффекта этого правила.
Селекторы атрибутов
Вы также можете применять стили к HTML-элементам с определенными атрибутами. Ниже правило стиля будет соответствовать всем input элементам, имеющим атрибут type со значением text:
Input { color: #0000FF; }
Преимущество использования селекторов атрибутов заключается в том, что элемент не изменяется, а цвет применяется только к нужным текстовым полям.
Для селектора атрибутов применяются следующие правила:
- p - выбирает все элементы абзаца с атрибутом lang.
- p - выбирает все элементы абзаца, где атрибут lang имеет точное значение «ru».
- p - выбирает все элементы абзаца, где атрибут lang содержит слово «ru».
- p - выбирает все элементы абзаца, где атрибут lang содержит значения, которые являются точными «ru» или начинаются с «ru».
Несколько правил стиля
Возможно, Вам потребуется определить несколько правил стиля для одного элемента. Вы можете задать эти правила для объединения нескольких свойств и соответствующих значений в один блок, как показано в следующем примере:
H1 { color: #00CED1; letter-spacing: .2em; text-transform: lowercase; margin-bottom: 2em; font-weight: 700; }
Все пары свойств и значений разделяются точкой с запятой (;). Вы можете сохранить их в одной строке или нескольких строках. Для лучшей читаемости сохраняйте их в отдельных строках.
Не беспокойтесь о свойствах, упомянутых в вышеупомянутом блоке. Эти свойства будут объяснены в следующих уроках.
Группировка селекторов в CSS
Вы можете применить стиль для многих селекторов, если хотите. Просто отделите селектора запятой, как показано в следующем примере:
H1, h2, h3 { color: #00CED1; letter-spacing: .2em; text-transform: lowercase; margin-bottom: 2em; font-weight: 700; }
Это правило стиля будет применено к элементам h1, h2 и h3. Порядок списка при группировки селекторов не имеет значения. Все элементы в селекторе будут иметь соответствующие объявления, применяемые к ним.
Вы можете группировать различные id селектора вместе, как показано ниже:
#header, #content, #footer { position: absolute; width: 300px; left: 250px; }
Данный материал посвящен основам оформления стилей на интернет-ресурсе при помощи селекторов.
Селекторы в CSS используются для определения конкретного
элемента в html-странице, для которого надо применить
или изменить стиль CSS.Виды селекторов в CSS
Селектор по элементам
Для придания необходимого CSS-стиля в данном случае в качестве селектора записывается название html элемента. Например, достаточно прописать нужный стиль для заголовка H1, после чего данные заголовки примут требуемый нам вид. Вот таким будет код:
H1 {
font-size: 11pt;
}Часто бывают случаи, когда надо сделать заголовки в разных стилях. Здесь для решения этой проблемы поможет селектор по классу.
Селектор по классам
Селектор по классу является универсальным в CSS. Записать его можно следующим образом: перед названием класса пишем точку, а уже потом в фигурных скобочках указываем необходимый нам стиль:
.red {
font-family: tahoma, sans-serif;
color: red;
font-size: 11pt;
}Пример использования селектора по классу. Применим данный стиль к заголовку H1 в html странице:
Заголовок страницы
Из примера выше видно, что применяется атрибут "class" с заданным названием CSS стиля "red ".
Другой пример. В html части пишем:Данный заголовок синего цвета, так как к нему применен соответствующий класс
id ".
В html документе это будет выглядеть так:
Зададим стиль для данного параграфа
В документе CSS:
p#newstyle { color: blue; font-size: 12px;}
В результате, для данного параграфа будет применен шрифт синего цвета и размером 12px.
Контекстный селектор
Не менее нужным компонентом является контекстный селектор .
Например, на сайте возникла необходимость заголовки "H1", заключенные тегом bold выделить красным цветом:H1 bold { color:red ; }
Как видим, в первую очередь пишется заголовок H1, ставится пробел, тег bold а затем в скобочках заданный нами стиль. Выразить словами это можно так: "При наличии внутри заголовка H1 тега bold текст должен быть красного цвета".
Этим способом можно задать также стили для пунктов маркированных списков, таблиц и даже их ячеек, причем с разным уровнем вложенности.
Следующая страница -
Похожие публикации
