Типы селекторов в CSS. Подробное описание с примерами
Данный материал посвящен основам оформления стилей на интернет-ресурсе при помощи селекторов.
Селекторы в CSS используются для определения конкретного
элемента в html-странице, для которого надо применить
или изменить стиль CSS.
Виды селекторов в CSS
Селектор по элементам
Для придания необходимого CSS-стиля в данном случае в качестве селектора записывается название html элемента. Например, достаточно прописать нужный стиль для заголовка h2, после чего данные заголовки примут требуемый нам вид. Вот таким будет код:
h2 {
font-family: tahoma, sans-serif;
font-size: 11pt;
}
Часто бывают случаи, когда надо сделать заголовки в разных стилях. Здесь для решения этой проблемы поможет селектор по классу.
Селектор по классам
Селектор по классу является универсальным в CSS. Записать его можно следующим образом: перед названием класса пишем точку, а уже потом в фигурных скобочках указываем необходимый нам стиль:
.red {
font-family: tahoma, sans-serif;
color: red;
font-size: 11pt;
}
Пример использования селектора по классу. Применим данный стиль к заголовку h2 в html странице:
<h2 class =»red»> Заголовок страницы </h2>
Из примера выше видно, что применяется атрибут «class» с заданным названием CSS стиля «red«.
Другой пример. В html части пишем:
<h2 class=»blue»> Данный заголовок синего цвета, так как к нему применен соответствующий класс </h2>
<h3 class =»small_grey > Текст, заключенный в данные теги, будет с уменьшенными буквами и серого цвета </h3>
Чтобы реализовать выше написанное необходимо внести следующие изменения в CSS:
.blue {color:blue;}
.small_grey {
font-size:12px;
color:grey;
}
Таким образом, в самом начале указывается стиль заголовков (селектор по элементу), после чего, в случае если надо в каком то заголовке внести изменения, пишется отдельный стиль (селектор по классу). При создании отдельного класса, необходимо прописывать те свойства, которые надо добавить или внести изменения по отношению к селектору по элементу.
Классы можно применять не только к заголовкам, но и к параграфам, таблицам, их ячейкам и т.д.
Если необходимо, чтобы класс распространял свое действие только на конкретный элемент (например параграф) следует написать данный элемент перед точкой, как в примере ниже:
P.black {color:black;}
Такая комбинация будет направлять свое действие на элемент P.
Селектор по id
Бывают случаи, когда необходимо задать стиль отдельному элементу на сайте. Делается это путем присваивания данному элементу атрибута «id«.
Далее в таблице стилей следует прописать селектор, который выглядит в виде решетки (#). Например, давайте зададим стиль селектором по id для параграфа.
В html документе это будет выглядеть так:
<p id=»newstyle»> Зададим стиль для данного параграфа </p>
В документе CSS:
p#newstyle { color: blue; font-size: 12px;}
В результате, для данного параграфа будет применен шрифт синего цвета и размером 12px.
Контекстный селектор
Не менее нужным компонентом является контекстный селектор.
Например, на сайте возникла необходимость заголовки «h2», заключенные тегом bold выделить красным цветом:
h2 bold { color:red; }
Как видим, в первую очередь пишется заголовок h2, ставится пробел, тег bold а затем в скобочках заданный нами стиль. Выразить словами это можно так: «При наличии внутри заголовка h2 тега bold текст должен быть красного цвета».
Этим способом можно задать также стили для пунктов маркированных списков, таблиц и даже их ячеек, причем с разным уровнем вложенности.
Следующая страница — Блоковая модель в CSS
Предыдущая — Как оформить ссылку с использованием CSS
CSS Selectors. Виды селекторов
Язык описания внешнего вида документа CSS постоянно развивается. Со временем растут не только его мощность и функциональность, повышаются также гибкость и удобство использования.
CSS selectors
Начнем разбираться. Откройте любой учебник CSS, как минимум один раздел в нем будет посвящен видам селекторов. В этом нет ничего удивительного, поскольку они являются одним из самых удобных способов управления контентом страницы. С их помощью можно взаимодействовать с абсолютно любыми элементами HTML. Сейчас существует 7 видов селекторов:
- универсальные;
- для взаимодействия с псевдоклассами;
- для управления псевдоэлементами.
Синтаксис прост. Чтобы научиться использовать CSS selectors, достаточно прочитать о них. Какой вариант лучше выбрать для контроля контента в вашем случае? Попробуем разобраться.
Селекторы тэгов
Это максимально простой вариант, который не требует особых знаний для записи. Чтобы управлять тегами, нужно использовать их название. Предположим, что «шапка» вашего сайта обернута в тег <header>. Для управления ею в CSS нужно использовать селектор header {}.
Достоинства — простота использования, универсальность.
Недостатки — полное отсутствие гибкости. В вышеописанном примере будут выбраны сразу все теги header. А что если нужно управлять только одним?
Селекторы класса
Самый распространенный вариант. Предназначен для управления тегами с атрибутом class. Предположим, в вашем коде есть три блока <div>, каждому из которых нужно задать определенный цвет. Как это сделать? Стандартные CSS selectors по тегам не подойдут, они указывают параметры для всех блоков сразу. Выход прост. Назначьте элементам класс. Например, первый div получил class=’red’, второй – class=’blue’, третий – class=’green’. Теперь их можно выбрать, используя таблицы CSS.
Синтаксис таков: указываем точку («.»), после которой пишем название класса. Чтобы управлять первым блоком, используем конструкцию .red. Вторым – .blue и так далее.
Важно! Рекомендуется использовать понятные значения атрибута class. Дурным тоном считается использование транслита (например, krasiviy-blok) или случайных комбинаций букв/цифр (ojfh834871). В таком коде вы обязательно запутаетесь, не говоря уже о том, с какими трудностями придется столкнуться тем, кто будет заниматься проектом после вас. Оптимальный вариант – использовать какую-нибудь методологию, вроде БЭМ.
Достоинства — довольно высокая гибкость.
Недостатки — у нескольких элементов может быть один и тот же класс, а значит, они будут редактироваться одновременно. Проблема решается использованием методологии, а также наследованием препроцессоров. Обязательно освойте less, sass или какой-нибудь другой препроцессор, они сильно упростят работу.
Селектор по ID
Насчет этого варианта мнения верстальщиков и программистов неоднозначны. Некоторые учебники CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Однако многие специалисты активно расставляют их по всей разметке. Решать вам. Синтаксис таков: символ решетки («#»), затем имя блока. Например, #red.
ID отличается от класса по нескольким параметрам. Во-первых, на странице не может быть двух одинаковых ID. Им назначаются уникальные имена. Во-вторых, такой селектор обладает более высоким приоритетом. Это значит, что если вы зададите блоку класс red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим.
Достоинства — можно управлять конкретным элементом, не обращая внимания на стили для тегов и классов.
Недостатки — легко запутаться в большом количестве ID и class.
Важно! Если вы пользуетесь методологией БЭМ (или ее аналогами), ID вам, в общем-то, не нужны. Такая техника верстки подразумевает использование уникальных классов, что гораздо удобнее.
Универсальный селектор
Синтаксис: знак зведочки («*») и фигурные скобки, т. е. *{}.
Используется для назначения определенных атрибутов сразу всем элементам страницы. Когда это может пригодиться? Например, если вы хотите задать странице свойство box-sizing: border-box. Может использоваться не только для управления всеми компонентами документа, но и для контроля всеми дочерними элементами определенного блока, например, div *{}.
Достоинства — можно управлять большим количеством элементов одновременно.
Недостатки — недостаточно гибкий вариант. Вдобавок, использование этого селектора в некоторых случаях замедляет работу страницы.
По атрибутам
Дают возможность управлять элементом с конкретным атрибутом. Например, у вас есть несколько тегов input с разным атрибутом type. Один из них – text, второй – password, третий – number. Конечно, можно задать каждому классы или ID, но это не всегда удобно. CSS selectors по атрибутам дают возможность указать значения для определенных тегов с максимальной точностью. Например, вот так:
input[type=’text’]{}
Этот селектор атрибутов выберет все input с типом text.
Инструмент довольно гибкий, его можно использовать с любыми тегами, у которых возможно наличие атрибутов. Но и это еще не все! В спецификации CSS есть возможность управлять элементами даже с большим удобством!
Представим, что на вашей странице есть input с атрибутом placeholder=“Введите имя“ и input placeholder=“Введите пароль“. Их также можно выбрать с помощью селектора! Для этого используется следующая конструкция:
input[placeholder=“Введите имя“]{} или input [placeholder=“Введите пароль“]
Возможна более гибкая работа с атрибутами. Допустим, у вас есть несколько тегов с похожими атрибутами title (скажем, «каспийский» и «каспийская»). Чтобы выбрать оба, используем следующие селекторы:
[title*=“каспийск“]
CSS выберет все элементы, в тайтле которых имеются символы «каспийск», т. е. и «каспийский», и «каспийская».
Также можно выбирать теги, атрибуты которых начинаются с определенных символов:
[title^=»нужный вам символ»] {}
или заканчиваются ими:
[title$=»нужный символ»] {}.
Достоинства — максимальная гибкость. Можно выбирать любые существующие элементы страницы без возни с классами.
Недостатки — используется относительно редко, только в специфических случаях. Многие верстальщики предпочитают методологии, поскольку указать класс бывает проще, чем расставлять многочисленные квадратные скобки и знаки «равно». Вдобавок, эти селекторы не работают в Internet Explorer версии 7 и ниже. Впрочем, кому сейчас нужны старые Internet Explorer?
Селекторы псевдоклассов
Псевдокласс обозначает состояние элемента. Например, :hover – то, что происходит с частью страницы при наведении курсора, :visited – посещенная ссылка. Сюда же входят элементы вроде :first-child и :last-child.
Этот тип селекторов активно применяется в современной верстке, поскольку благодаря ему можно сделать страницу «живой» без применения JavaScript. Например, вы хотите сделать так, чтобы при наведении на кнопку с классом btn ее цвет менялся. Для этого используем следующую конструкцию:
.btn:hover {
background-color: red;
}
Для красоты можно указать в основных свойствах этой кнопки свойство transition, например, в 0,5s – в таком случае кнопка будет краснеть не мгновенно, а в течение полусекунды.
Достоинства — активно используются для «оживления» страниц. Просты в применении.
Недостатки — их нет. Это действительно удобное средство. Однако неопытные верстальщики могут запутаться в обилии псевдоклассов. Проблема решается учебой и практикой.
Селекторы псевдоэлементов
«Псевдоэлементы» – это те части страницы, которых нет в HTML, но ими все равно можно управлять. Ничего не поняли? Все проще, чем кажется. Например, вы хотите сделать первую букву в строке большой и красной, оставив прочий текст маленьким и черным. Конечно, можно заключить эту букву в span с определенным классом, но это долго и скучно. Гораздо проще выделить весь абзац и использовать псевдоэлемент ::first-letter. Он дает возможность управлять внешним видом первой буквы.
Существует довольно большое количество псевдоэлементов. Перечислить их в рамках одной статьи вряд ли получится. Вы можете найти соответствующую информацию в любимом поисковике.
Достоинства — дают возможность гибко настраивать внешний вид страницы.
Недостатки — новички в них часто путаются. Многие селекторы этого типа работают только в определенных браузерах.
Подведем итог
Селектор – мощное средство контроля потока документа. Благодаря ему можно выбрать абсолютно каждый компонент страницы (даже существующий лишь условно). Обязательно выучите все имеющиеся варианты или хотя бы запишите их. Это особенно важно, если вы создаете сложные страницы с современным дизайном и большим количеством интерактивных элементов.
HTML\CSS: Виды CSS селекторов
Селектор в CSS — это указатель на элемент или группу элементов, к которым будут применяется правила стилей. Существуют следующие виды селекторов:
1. Селекторы по тэгам: h2
2. Селектор по id: #main
3. Селекторы по классам: .hidden
4. Селектор по нескольким классам
Записываются слитно без пробелов. Селекторы удовлетворяющие одновременно сразу нескольким условиям (логическое “И”). Стили будут применяться ко всем элементам, которые одновременно имеют и класс .hidden и класс .closed.
.hidden.closed
5. Контекстные селекторы
Разделяются пробелом
p strong ul .selected .header .menu a
Например, селектор .menu a сработает для ссылки a только в том случае, если она расположена внутри элемента с классом .menu.
6. Соседние селекторы
Выделяет последующий элемент. Записываются с помощью знака +. Читается как: применить свойства к селектор2 который должен быть сразу после селектор1.
Стили применяются к элементу, подходящему под селектор2, только если перед ним расположен элемент, подходящий подселектор1.
<li></li>
<li></li>
...
.green + .selected {}В примере .green + .selected применит стили ко второму элементу, т.к. перед ним есть элемент с классом .green. Селектор.green + li тоже применит стили ко второму элементу, а селектор .selected + .green не сработает.
7. Родственные селекторы
Выделяет последующие элементы. Похожи на предыдущий, но с тем различием, что выбираются все следующие элементы, а не только первый элемент.
<ul><li>item</li></ul>
<p>Selected</p>
<p>Selected</p>
<p>Selected too</p>
<span>Not selected</span>
...
ul ~ p {}В данном примере будут выбраны все элементы p, идущие за ul. В то время, как при использовании селектора ul + p будет выбран только первый элемент.
8. Дочерние селекторы
Записываются с помощью знака > и распространяются только на элементы первого уровня вложенности. На элементы вложенные в другие элементы не распространяются.
ul > li {}
В случае контекстных селекторов они влияют на всех потомков (например если задать ul li) что не всегда удобно. Дочерние селекторы позволяют задать стили только для элементов первого уровня вложенности.
ul > li означает то же, что и ul li, но выбираются только li первого уровня вложенности, которые напрямую являются вложенными в ul. На li вложенные в другие дочерные li элементы, правила уже не будут действовать.
9. Селекторы атрибутов
Чаще всего используются при работе с формами. Селекторы атрибутов записываются с использованием квадратных скобокэлемент[атрибут].
Примеры селекторов атрибутов:
input[type="text"] input[checked] div[data-type="image"] a[href*=".com"] a[href^="http"] a[href$=".jpg"] a[data-info~="bar"]
В примере выше ~ позволяет выделить определенный атрибут из списка атрибутов, разделенных запятой, например из:
<a href="#" data-info="foo bar">
10. Глобальный селектор
Селектор * выберет все элементы. Его также можно использовать для выделения дочерних элементов:
* { margin: 0; padding: 0; }
.content * { outline: none; }11. Псевдоклассы
Примеры псевдоклассов:
a:link
a:visited
a:active
a:hover
input[type=radio]:checked
.clearfix:after {}
div:not(#container)
p::first-line
p::first-letterПсевдокласс отрицания :not бывает очень полезным. Например, когда необходимо выбрать все div, за исключением того, который имеет id container.
Смотрите также Селекторы на основе нумерации и Селекторы на основе порядка.
Виды и правила написания селекторов в CSS
Здравствуйте, уважаемые читатели блога MonetaVInternete.ru. в одной из прошлых статей я все же вернулся к теме создания сайтов, а конкретнее — начал рассказывать про каскадные таблицы стилей (CSS). Основную информацию вы можете прочесть по приведенной ссылке. В этой статье мы более подробно рассмотрим css селекторы — их виды, правила написания, а также примеры использования.
Как известно, язык css создан дабы оптимизировать описание внешнего вида документа. Без него практически любой html документ (более или менее нормально оформленный) выглядел бы довольно пугающе для поисковых систем, ведь они исследуют код страницы, который, в свою очередь, был бы наполнен разными тегами и атрибутами. С помощью CSS все параметры внешнего вида можно поместить в один файл, который потом можно просто подключить к документу.
В прошлой статьей по этой теме мы создали два файла, page.html и style.css — веб-документ и файл со стилями соответственно. Также мы выполнили подключение файла к документу (тег style в шапке страницы). Css файл был вот такого содержания:
А в страничке был такой код:
С подключенным файлом каскадной таблицы стилей она приобрела вот такой вид:
В прошлой статье я дал лишь основные, базовые знания о языке стилей, да и то не полностью. Поэтому сразу хочу начать с того, что еще не сказал.
Виды селекторов и правила их употребления
В языке стилей существуют так называемые приоритеты, более подробно мы их рассмотрим в следующей статьей этой рубрики. Самым низким приоритетом обладает стиль самого браузера. Да, у всех современных браузеров есть свой файл стилей, который будет использоваться в самую последнюю очередь. Следом за ним идут стили, заданные пользователем (вами). Вы сами можете создать файл стилей, записать в него свойства и этот файл действительно будет использоваться, но только в одном случае — если у сайта нет своих стилей, заданных автором.
Вот они и обладают наивысшим приоритетом — стили автора. CSS файл, который вы прикрепляете, свойства, которые прописываете в шапке или же отдельно в тегах, все это является стилем автора и ставится на первое место при обработке браузером документа (хотя и среди перечисленных элементов есть свои правила приоритетов). Но это далеко не все — в стилях автора имеют место свои правила приоритетов, которые зависят от иерархии, правил и селекторов. Вот с последних и начнем. Итак, виды css селекторов. Чтобы все не просто прочесть, но и изучить на практике, рекомендую использовать ранее созданные файлы html и css.
Универсальный селектор
Селектор, который задает стандартный стиль для всех элементов. Обозначается звездочкой. Имеет самый низкий приоритет. Вот такой свойство окрашивает все элементы в зеленый цвет:
* {color:green;} Селекторы элемента
Задает стили для тегов. Помните картинку с прошлой записи, где я указывал что такое селектор и правило? Вот там был задан селектор элемента абзац (тег p). Результат — стандартный шрифт семейства cursive зеленого цвета
p {
font-family: cursive;
font-weight: normal;
color: green;
}
Селекторы атрибутов
Задают указанные свойства для каждого тега, в котором есть данный атрибут. Вот пример (все содержимое тегов с атрибутом title окрасится в синий цвет) :
[title] {color:blue;} Есть у этих селекторов и свои особенности. Например, для того, чтобы применить стили к атрибутам с конкретными значениями, нужно просто прописать эти значения:
[title="какой-нибудь заголовок"] {color:red;} Если нужно изменить стиль атрибутов, в значении которых содержится какой-либо текст, даже если он является частью слова, то используем следующее :
[title*="гол"] {color:red;} Если же нам нужно изменить стиль атрибута, в котором содержится слово целиком, то поможет такая конструкция:
[title~="заголовок"] {color:red;} Если изменить атрибут, который начинается с определенного текста то делаем вот так:
[title^="заг"] {color:red;} И, наконец, изменяем атрибут, который заканчивается на какой-либо текст:
[title$="ловок"] {color:red;} Селектор классов
Здесь все основывается на универсальном атрибуте class, который применим ко всем тегам. Это одно из основных средств верстки сайта. Структура css стиля:
.abs {color:red;}Так как атрибут универсальный, то можно применить его к любому тегу:
<div>Текст внутри тегов с классом abs</div>
Результат — все содержимое тегов, которые содержат класс abs, будет окрашено в красный цвет. Использовать можно сколь угодно много раз на странице. Также позволяется использовать сразу несколько классов для одного тега. Каждый записывается через пробел в атрибуте class:
<div>Текст внутри тегов с классом abs</div>
Вообще, селекторы классов являются самыми популярными, потому что с их помощью можно довольно легко управлять элементами сайта — изменять внешний вид, передвигать и т.д.
Селекторы идентификаторов
Отличаются от предыдущей группы только тем, что могут использоваться только 1 раз на странице. В теге используется атрибут id:
<div> какой-нибудь текст
А в стилях такой селектор обозначается символом решетки #:
#size {font-size:24px;}Селекторы дочерних элементов
Используется если нужно задать стиль для какого-либо дочернего элемента, не затронув остальные (честно говоря, легче использовать атрибут class). Имеем вот такую конструкцию:
<p>Нужно сделать <a href="#">эту ссылку</a> красного цвета, а <span><a href="#">эту</a></span> не трогать</p>
Чтобы выполнить поставленную задачу используются селекторы потомков:
p>a {color:red;}Как видите, мы указали, что тег a является дочерним тегом p, и изменили его цвет. Если же вы хотите изменить все элементы-потомки, то вместо знака «больше» нужно вставить пробел:
p a {color:red;}В результате обе ссылки будут красного цвета.
Селектор сестринских элементов
Если вам нужно изменить стиль соседских элементов (по иерархии), то можно использовать следующую конструкцию:
span + a {color red;}Селекторы потомков
Позволяют изменять содержимое только тех тегов, которые содержат указанный параметр — атрибут, класс, идентификатор. Выглядят следующим образом:
div.abs {color:red;}Прошу заметить, div.abs пишется без пробелов. В этом случае все элементы, находящиеся в теге div с атрибутом будут окрашены в красный цвет. Пример:
<div>Текст красного цвета</div>
Если же нужно изменить стиль элементов с идентификатором, то вместо точки нужно будет поставить символ #.
Селекторы псевдоклассов
Псевдоклассы — классы, наличие которых зависит от состояния объекта или документа. Чаще всего их используют для изменения внешнего вида каких-либо форм или ссылок. В css стили для таких элементов задаются по следующему шаблону:
a:hover {color:green;}В данном случае, все ссылки в документе при наведении на них курсора станут зелеными. Псевдоклассов не так много, но их использование может сильно помочь при работе с дизайном.
Вот вроде бы и все виды селекторов в CSS. Надеюсь, вы их опробовали на тех файлах, которые мы создавали на прошлом уроке. В следующей статье из рубрики «Основы HTML и CSS» мы поговорим о приоритетах в CSS, без знания которых будет довольно сложно работать с внешним видом сайта. До скорых встреч на страницах блога MonetaVInternete.ru!
CSS — Селекторы / ProgLang
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 — Как создать сайт
Селекторы в CSS по категориям
СелекторыСелекторы в языке CSS
Впервые, мы познакомились с селекторами CSS в девятом уроке учебника по CSS. В этой статье мы изучим селекторы более подробно, а так же рассмотрим другие виды селекторов CSS.
Селектор (от англ. selector) — сортировка, выборка. Под селекторами, в языке CSS понимается способ выборки элементов (тегов) страницы.
Как мы знаем из учебника по CSS, схема CSS-кода выглядит следующим образом:
селектор {
CSS-свойство: значение;
CSS-свойство: значение;
... и т.д.
}Виды CSS-селекторов
Всего существует три основных вида селекторов и их различные взаимоотношения. Помимо этого существует универсальный селектор, селекторы атрибутов, селекторы атрибутов и значений и их выборка с помощью регулярных выражений.
Обычно, при создании сайта, используют лишь основные селекторы.
Основные виды селекторов CSS
1. Селектор тега — выбор элемента страницы по имени его тега имяТега { }
2. Селектор class — выбор элемента страницы по имени его класса .имяКласса { }
3. Селекторы id — выбор элемента страницы по имени его уникального идентификатора #имяУникальногоИдентификатора { }
Взаимоотношения между селекторами CSS
Взаимоотношения между селекторами, это когда между ними в CSS-коде ставят какой-либо знак: пробел, запятую, угловую скобку и т.д. Таким образом, можно выбрать какой-либо элемент на странице более точечно.
1. Контекстные селекторы — выбор элементов потомков селектор селектор { } (между селекторами ставят пробел).
2. Дочерние селекторы — выбор дочерних элементов селектор > селектор { } (между селекторами ставят знак больше).
3. Соседние селекторы — выбор соседних (братских, сестринских) элементов селектор + селектор { } (между селекторами ставят знак плюс).
Если что не понятно, не переживайте, каждый селектор и их взаимоотношения мы рассмотрим отдельно, в статьях посвященных только им, вот только допишу эти статьи 🙂
Селекторы атрибутов и значений
Селекторы атрибутов и значений — выбирают элементы по их атрибуту или атрибуту и значению.
1. Селектор атрибута — выбор элемента по имени атрибута [атрибут] { }
2. Селектор атрибута и значения — выбор элемента по имени его атрибута и значения [атрибут = "значение"] { }
Универсальный селектор
В CSS-коде, универсальный селектор записывают как символ звёздочка * Универсальный селектор необходим для того,
чтобы задать CSS-свойства сразу всем элементам страницы. Обычно его используют для того чтобы обнулить отступы у элементов, пример:
* { margin:0; padding:0; }Отступы у всех элементов страницы равны 0.
Группирование селекторов
Группирование селекторов — выбор нескольких селекторов и назначение им определённых CSS-свойств, схема:
селектор, селектор { }Между селекторами ставят запятую.
Читать далее: Селекторы тегов в CSS
Дата публикации поста: 5 февраля 2016
Дата обновления поста: 16 октября 2014
Навигация по записям
Урок 2. Селекторы и правила CSS
1. Пример работы CSSСелекторы в CSS
2. Идентификаторы (id)
3. Классы (class)
4. Унифицированные селекторы
5. Контекстные селекторы
6. Группировка селекторов в CSS
В прошлом уроке мы разбирали способы подключения CSS. Теперь перейдём к самому языку.
Как и любой другой язык, CSS имеет свой, однако предельно простой синтаксис. Состоит всего из двух компонентов:
1. Селектор (выбор объекта, с которым будем работать. Например, заголовок, div, таблица и тд.)
2. Блок стилей — описание одного или нескольких свойств объекта — цвет, размер и тд. Заключается в фигурные скобки {}
Мы видим, как заголовку — селектор, в блоке стилей присваивается свойство цвет текста (color) — синий.
Блок стилей состоит из свойств и их значений, которые при перечислении разделяются точкой с запятой ( ; ), как в примере ниже.
Теперь мы добавляем ещё одно свойство — форматирование текста (font). В нём мы придаём значение размер текста — 20 пикселей.
Пример работы CSS
Создайте в любом месте папку, например, урок 2. В ней создайте файл style.css. В него скопируйте весь код ниже. В коде CSS мы задаём свойства для тега <body> и заголовков <h2> и <h3>.
Код CSS (файл style.css)
body{
background: gray;
color: white;
}
h2{color:#0085cc;}
h3{color:white;}Обратите внимание, не будет разницы, записывать блок стилей в строчку (h2,h3) или в столбик (body). И тот, и другой вариант будут работать. Выбирайте так, как Вам удобно.
Теперь создаём HTML-файл. Неважно, какое будет название, главное, чтобы путь к файлу с CSS кодом был указан верно. Указывается также как и в ссылках, путях к изображениям. В примере ниже указан путь (style.css) в ту же директорию, что и html-файл. То есть оба файла должны быть в одной папке.
Код HTML
<html>
<head>
<title>Пример работы CSS</title><!-- Подключаем CSS. После href= в кавычках путь к файлу -->
<link rel="stylesheet" type="text/css" href="style.css"></head>
<body><h2>Заголовок h2</h2>
<h3>Заголовок h3</h3></body>
</html>
Результат работы кода можно увидеть по ссылке ниже.Демонстрация Скачать исходники
| Если Вы измените какие-либо свойства в блоке стилей, то для обновления дизайна достаточно обновить страницу (Ctrl+F5). |
Селекторы CSS
В примерах выше в качестве селекторов использовались элементы страницы: body, h2, h3. Однако бывают ситуации, когда нужно работать с конкретным элементом, а не со всеми. Например, все заголовки были синего цвета, а один, в конце, чёрного. Для это существуют разные виды селекторов. Давайте рассмотрим их подробнее.
Идентификаторы
Идентификатор элемента — это селектор, который присваивается одному элементу и делает его уникальным. Задаётся при помощи параметра id.
<p id="blue">Данному параграфу присвоен id. У него будут уникальные свойства.</p>
<p>Параметры текста останутся по умолчанию.</p>
Разберём пример
Код HTML и CSS
<html>
<head>
<title>Пример работы CSS</title><!-- В этот раз используем встроенные стили, не из отдельного файла. -->
<style>
p{ color:black; }
p#blue{ color:blue; }
</style></head>
<body><p id="blue">Текст который будет синего цвета, потому что есть id</p>
<p>Цвет текста останется по умолчанию.</p></body>
</html>
Сначала в стилях у всех параграфов в свойстве цвета указан черный цвет, а текст параграфа с id «blue» будет синим. Селектор в данном случае состоит из элемента (p — параграф), разделителя (# — обозначение идентификатора) и имени идентификатора (blue).
Важно отметить то, что идентификатор в теории даётся только одному элементу, которому хотим придать уникальные свойства. Да, в некоторых браузерах, если дать один и тот же идентификатор двум элементам, то может сработать. Однако, такое получится не во везде.
Если хотите задать стили для нескольких элементов, то следует использовать классы.
Классы
Класс (class) — это селектор, который позволяет применить стили к одному и более элементам. Например, id применим только к одному уникальному элементу. В качестве значения принимается имя элемента.
| Названия (имя) для id и class могут быть одинаковыми, однако для CSS это всё равно будут разные элементы. В CSS к идентификатору обращается упоминанием символа #, а к классу . (точкой). |
Рассмотрим пример:
Код HTML и CSS
<html>
<head>
<title>Пример работы CSS</title><!-- В этот раз используем встроенные стили, не из отдельного файла. -->
<style>
p{ color:black; }
p#blue{ color:blue; }
p.blue{ color:blue; font-weight: bold;}
</style></head>
<body><p>Цвет текста чёрный.</p>
<p class="blue">Текст полужирный и синего цвета.</p>
<p id="blue">Текст синего цвета.</p>
<p class="blue">Текст полужирный и синего цвета.</p>
<p>Цвет текста чёрный.</p></body>
</html>
В результате параграф с идентификатором (id) blue будет иметь текст синего цвета, элементы с class blue будут выделены полужирным шрифтом и синим цветом. А все остальные элементы p будут иметь шрифт чёрного цвета.
Как видите, класс можно применить несколько раз. Соответственно всё элементы будут иметь свойства описанные для данного класса.
Унифицированные селекторы
Унифицированные селекторы (.) — это селектор, который можно присвоить разному типу элементов, например, и заголовкам, и параграфам, и блокам (div). Самый распространённый вариант. До этого мы использовали конструкцию в коде CSS p#blue и p.blue, то есть сначала указывали тип элемента (p — параграф), а потом уже сам идентификатор или класс. Так вот можно указывать конструкцию проще, сразу начинать с .blue. Подобный селектор будет применим уже не только к параграфам, а к другим элементам.
Код HTML и CSS
<html>
<head>
<title>Пример работы CSS</title><!-- В этот раз используем встроенные стили, не из отдельного файла. -->
<style>
p{ color:black; }
#blue{ color:blue; }
.blue{ color:blue; font-weight: bold;}
</style></head>
<body><h2 id="blue">Заголовок с идентификатором.</h2>
<p>Цвет текста чёрный.</p>
<p class="blue">Текст полужирный и синего цвета.</p>
<div class="blue">Текст в блоке тоже полужирный и синего цвета</div>
<span class="blue">Текст в строчном элементе тоже полужирный и синего цвета</span></body>
</html>
В результате унифицированный селектор, в данном случае класс .blue, мы применили и к парафграфу (p), и к блоку (div), и к строковому элементу (span). Результат везде одинаковый — текст полужирный и синего цвета.
Контекстные селекторы
Контекстный селектор — это селектор, который выделяет один элемент в группе других элементов. В написании выделяется пробелом. Чтобы было легче, сразу перейдём к примеру. Допустим мы хотим, чтобы полужирный текст, содержащийся в параграфах выделялся ещё каким-либо цветом.
Код HTML и CSS
<html>
<head>
<title>Пример работы CSS</title><style>
p strong{ color:blue;}
</style></head>
<body><p>Цвет текста чёрный. Но теги полужирный шрифта тут не упоминаются.</p>
<strong>Обычный полужирный текст</strong>, который не содержится в параграфе. Поэтому и цвет у него не меняется.
<p>И внимание!!! Параграф с фразой <strong>полужирным шрифтом синего цвета</strong></p></body>
</html>
Соответственно синим будет выделен только тот полужирный текст (strong), который будет в параграфе (p).
Группировка селекторов
Группировка селекторов — это такая конструкция таблицы стилей, где блок объявления стилей обращён к одному и более ранее упоминаемым элементам и добавляет новое свойство.
По тексту сложно понять. Лучше сразу к примеру.
h2, h3, h4{ color:blue; }
h2{ font-size:18px; }
h3{ font-size:16px; }
h4{ font-size:14px; }В первой строке мы упоминаем сразу несколько элементов. Для того, чтобы обратиться сразу к нескольким элементам надо в селекторе перечислить их через знак , (запятую) и пробел. Перед последним перечисляемым элементом запятая и пробел НЕ нужны.
Последующими упоминаниями данных элементов мы добавляем им значения новых свойств. В данном случае размера шрифта.
Код HTML и CSS
<html>
<head>
<title>Пример работы CSS</title><style>
h2, h3, h4{ color:blue; }
h2{ font-size:18px; }
h3{ font-size:16px; }
h4{ font-size:14px; }
</style></head>
<body><h2>Заголовок h2</h2>
<h3>Заголовок h3</h3>
<h4>Заголовок h4</h4></body>
</html>
В результате все заголовки будут синего цвета. Однако разных размеров, так как последующие записи в таблице стилей давали заголовкам разный размер.
Использование группировки — вопрос спорный. Среди преимуществ можно отметить то, что удаётся избегать крупных частей кода, которые по содержание будут во многом дублировать себя. Из недостатков можно сказать, что использование подобного кода, где свойства к тому или иному элементу дописываются в разных местах достаточно проблемно и неудобно. Конечно, при грамотном последовательном написании можно избежать подобных минусов, но это уже другой вопрос.
Спасибо за внимание! Урок окончен!