Селекторы css. Комплексные селекторы. Инструкция пользования персональным компьютером
Совокупность правил оформления (которые в свою очередь состоят из селекторов с блоком объявлений) примененных к определенным html тегам, за счет чего и формируется внешний вид сайта.
CSS селектор – это составная часть CSS правила отвечающая за определение конкретных html тегов, к которым будут применены стили оформления, прописанные в этом правиле.
Так, именно благодаря селекторам браузер понимает к каким именно элементам кода страницы нужно применять конкретные стили оформления.
Инструмент выбора элементов в CSS отличается крайней гибкостью и удобством выбора как отдельных элементов кода, так и целых групп элементов определенных по тем или иным признакам.
Виды css селекторов
Как и предложения в тексте селекторы CSS бывают простыми и сложными. Разница между ними заключается в том, что сложные получаются из объединения нескольких простых и используются для более точной настройки конечного оформления ресурса.
Только в отличие от обычных текстов в каскадных таблицах стилей имеет значение в каком порядке и какие селекторы мы будем использовать. Причем от этого будет зависеть не только то, какие элементы и по какому признаку мы выберем, а и скорость обработки нашего кода в целом, но о тонкостях мы поговорим в дальнейших статьях.
Простые селекторы
- Универсальный селектор – отвечает за выбор вообще всех элементов в документе. Задается звездочкой. Обычно применяется для обнуления стилей браузеров, установленных в них по умолчанию, чтобы у всех, кто будет заходить на сайт не уплыло оформление в случае использования каких-то собственных настроек браузера или же различных плагинов…
* { какой- то стиль; }
- Селектор типа – выбирает все теги, соответствующие определенному типу. Задается названием тега. Используется для задания общих правил оформления документа, к примеру, задать разные шрифты заголовкам и простому тексту документа.
h1 { какой- то стиль; }
- – применит правило цсс ко всем тегам с конкретным названием класса. Задается точкой с написанным сразу после нее названием класса. Пожалуй самый часто встречающийся в верстке селектор. Обычно используется, чтобы задавать различные стили оформления тегам одинаковым по типу, но разным по функциональному назначению.
LeftColumn { какой- то стиль; }
- Селектор идентификатора – применяется для оформления уникальных элементов на странице. Задается решеткой после которой идет название id. Используется, если нужно оформить один конкретный элемент страницы.
#alertButton { какой- то стиль; }
- – выбирает теги у которых присутствует атрибут. Задается названием атрибута в квадратных скобках. Может использоваться как для оформления группы тегов в которых просто присутствует заданный атрибут, так и для группы тегов в которых присутствует заданный атрибут с определенным значением.
[ type] { какой- то стиль; } [ type= "submit" ] { какой- то стиль; } input[ type= "submit" ] { какой- то стиль; }
Сложные селекторы
- Селектор потомка – выбор потомков (тегов находящихся внутри другого тега) элементов. Задается через пробел (родитель – пробел – потомок).
div p { какой- то стиль; }
- Селектор дочернего элемента - выбор элемента непосредственно вложенного в другой элемент. Задается символом «>» (родитель-галочка-дочерний элемент). Дочерний элемент отличается от потомка тем, что следует непосредственно после родителя (первый уровень вложенности). В то время как потомком считается любой тег внутри другого не зависимо от уровня вложенности.
Sidebar> ul { какой- то стиль; }
- Селектор сестринского элемента – выбирает тег идущий сразу после другого тега (не заключенный внутрь, а идущий далее). Задается плюсом (первый элемент – плюс – сестринский элемент). На практике используется редко. Обязательным условием применение является наличие общего родителя для всех элементов объединенным знаком «+».
h1+ p { какой- то стиль; }
Псевдоклассы и псевдоэлементы
Вышеперечисленная классификация селекторов CSS зависела исключтиельно от разметки документа. Если мы хотим задать изменение внешнего вида элементов в зависимости от изменения его состояния на странице (к примеру смена цвета кнопки при наведении), то мы можем использовать селекторы псевдоклассов и псевдоэлементов .
- Помните, что в отличие от html в CSS регистр букв имеет значение. Тоесть класс.active и.Active это не одно и то же! Они применятся к разным элементам, если таковые есть в документе.
- Называйте селекторы для оформления так, чтобы потом в них не запутаться: .leftColumn – хорошее название, .left – зависит от ситуации, но уже неочень, .llll – фигня какаято, ты сам то скажешь не глядя на код откуда этот класс взялся?
- Еще раз напоминаю – если элемент на странице один, такой весь уникальный, то для него используем id, если же есть вероятность, что появится еще один такой или же просто подобных элементов на странице несколько, то пользуйтесь для оформления классами.
Подводя итоги
Селекторы в CSS – это мощнейший инструмент идентификации определенных элементов страницы или же группы элементов объединенных конкретным признаком для дальнейшего применения к ним стилей оформления из блока объявлений относящегося к данному селектору.
После освоения общих принципов взаимодействия и создания селекторов вы забудете о проблемах с оформлением веб-документов. Хорошее знание селекторов позволяет значительно сократить время верстки html страниц.
Тема хоть и кажется крайне запутанной на первый взгляд становится простой и понятной после некоторого периода практики, подкрепленного качественной теорией.
Не все, но более, чем достаточно
Люди, изучающие XHTML, а также CSS по книгам, нередко сталкиваются с тем, что события CSS описаны не полностью. В частности, описываются только такие события, как hover, active, visited. Событий CSS гораздо больше и возможности, которые они дают, очень большие.
Здесь не приводится полный список событий, а только те, которые реально понадобятся современному веб-дизайнеру.
Если Вы назначаете блоку событие after, то после блока будет выведен сгенерированный код, определенный в таблице стилей. Для определения кода используется команда CSS - content , синтаксис которой - content:" XHTML код ".
Т.е. вся команда может выгладеть так:
#someId:after
{content:"XHTML код"}
:before Работает также, как и after, но выводит код до элемента:first-child Задает стиль для первого дочернего элемента какого-либо другого элемента.
Допустим, применяя это событие к тегу h1, первый и только первый заголовок первого уровня будет отображен с соответствующим стилем. Особенно эффективно использовать это событие для стилей вложенных тегов(многоуровневых), например, вот так:
body ol li:first-child{...}(т.е. Во всех списках ol первый элемент li, но не ul, будет отображен с заданными настройками стилей)
:last-child Задает стиль для последнего дочернего элемента какого-либо другого элемента. :focus Задает смтиль для элементов форм, которые получают фокус, т.е. те, по которым вы щелкаете. Например, можно сделать активное поле для ввода текста отличным от неактивного поля. :hover Стиль для элемента, на который наведен курсор. Может использоваться со всеми блоками и текстом (раньше мы рассматривали только ссылки). :lang(x ) Ставит элементу в соответствие определенный язык, никак не изменяя содержимое элемента. Такой тег можно использовать, например, для выделения ссылок на различные источники. Вместо x ставится двузначное интернациональное обозначение языка, или иначе, название доменной зоны. Например, для России это ru , для Америки us , и так далее. Если элементу нужно поставить в определение несколько языков сразу, они должны разделяться дефисом без пробелов (в порядке понижения важностей стилей, которые определяет каждый язык). :visited Задает стиль посещенной ссылки:nth-child(x) Задает стиль для определенных элементов или одного определенного элемента. x может быть выражен:
- числом. В этом случае выделен будет только 1 элемент
- выражениями odd(все нечетные элементы) или even(все четные элементы).
- выражением an+b, где n не изменяется, a и b - произвольные числа. Например, 7n+4. Будут выделены все элементы, дающие при делении на 7 остаток 4. (4, 11, 18 и т.д.) При этом, если a или b равны 0, то их можно не указывать. Отсчет n элементов ведется с 0 до n-1
Углубленное изучение селекторов CSS
Материалов, описанных выше, хватит многим, но не всем. В сайтах больших компаний, публичных проектов, социальных сетей используются очень сложные CSS селекторы и иногда описанного выше функционала не хватает. Кроме того, CSS должны взаимодействовать с языками серверного программирования, т.е. зачастую CSS к определенным страницам создается автоматически. При этом он должен безошибочно и правильно функционировать.
Мы упоминали наследственность элементов. Теперь мы разберем ее более глубоко.
CSS может определить правила для различных видов наследственности, или принадлежности элементов к родительскому элементу. Все они служат лишь для выбора элементов, к которым будет применено правило.
Комбинаторы (создание связи между стилями на основе наследственности) | |
---|---|
Adjacent Sibling (+) | Этот комбинатор определяет 2 элемента, которые следуют сразу друг за другом (между ними нет других элементов с тем же родителем, что и те 2 элемента, но могут быть наследственные им элементы) и имеют одного родителя. Стиль применяется сразу к обоим элементам. Синтаксис записи(пробелы не учитываются) E+F{...} где E - первый элемент, F - второй элемент. Например, h1+h2{font-family:serif} Эта запись определит стиль только для последующих друг за другом элементов h1 и h2, которые имеют одного родителя. Если после h2 стоит другой тег h2, то к нему стиль не применяется. |
Child (>) Combinator | Комбинатор определяет все элементы, являющиеся прямыми потомками одного элемента. Поддерживает несколько уровней вложенности, например: body > div > p{...} То есть, стиль,стиль будет применен только к параграфам, которые являются потомками всех блоков div, которые непосредственно принадлежат тегу body. |
Descendant | Определяет произвольную связь между элементами. То есть, элементы не должны быть прямыми наследниками, а просто наследниками одного элемента. Синтаксис(пробел обязателен): E F{...} Например: table.table1 td{...} То есть стиль будет определен во всех столбцах-потомках таблицы с классом table1, даже если внутри этой таблицы есть другие таблицы. К столбцам таблиц-наследников также будет применен стиль. |
General Sibling (~) | Синтаксис E~F. Комбинатор выполняет такую же функцию, как и Adjacent Sibling, за исключением того, что между E и F может быть любое количество элементов того же уровня вложенности и F может быть не один. |
Атрибуты. Селекторы атрибутов. Создание собственных атрибутов | |
Equality [=] | У каждого тега может быть атрибут (например, атрибут id, который может быть практически у любого тега, или атрибут width(только для блоков)). Вы можете создать свой атрибут, представляющий собой текстовую строку. Например, attr. Создание собственных атрибутов пригодится для селекторов атрибутов в CSS. Атрибуты могут использоваться вместе с комбинаторами. Equality определяет стиль для всех элементов, определенный атрибут которых в точности равен указанному значению. Синтаксис: {...} Как видим, здесь не определены теги. Стили определяются для всех элементов, у которых атрибут att равен значению val . Att и val могут принимать значения идентификаторов (например, для att могут быть любые изученные атрибуты, для val - none, block и т.д.) и строковые значения, т.е. просто слово (например, будет определять все элементы с записью <... attr="test" ...="">). |
Existence | Определяет все элементы, имеющие атрибут, независимо от его значения. Синтаксис: {...} att - атрибут(или строковое значение, т.е. собственный атрибут) |
Prefix [^=] | Определяет элементы, у которых есть атрибут att, принимающий значение, начинающееся с val. Синтаксис: {...} att - атрибут(или строковое значение, т.е. собственный атрибут), val - значение атрибута Очень хороший пример: Википедия. На этом сайте все ссылки, ведущие на другие сайты, кроме Википедии, имеют позади значок (стрелку). Вот пример записи, позволяющий записать такой стиль: :after {content""} |
Suffix [$=] | Определяет элементы, у которых есть атрибут att, принимающий значение, заканчивающееся на val. Синтаксис {...} Такой атрибут недавно начали использовать, чтобы перед различными ссылками ставить картинки, которые визуально укажут пользователю, к какому файлу, странице его отошлет ссылка. Например, перед ссылками на PDF файлы можно поставить значок PDF.Пример: :before {content:""} |
Substring [*=] | Синтаксис записи: {...} Отбирает все элементы с атрибутом att, в значение которого входит подстрока val. Например, "54" - подстрока "13254 6", "val" - подстрока "value" и т.д. |
Whitespace [~=] | Whitespace - то же, что и Substring, однако подстрока должна быть словом, т.е. окружена в сстроке пробелами. |
Hyphen [|=] | То же, что и Substring, однако подстрока должна быть частью атрибута и разделяться с другой частью (частями) дефисом. Пример: {...} отберет все теги с атрибутом lang, в значении которого есть en, например en-ru, ru-de-en и т.д. |
На этом заканчивается изучение XHTML+CSS. Далее уроки пойдут про JavaScript.
CSS selectors define the elements to which a set of CSS rules apply.
Basic selectors
Universal selector Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.Syntax: * ns |* *|*
Example: * will match all the elements of the document. Type selector Selects all elements that have the given node name.
Syntax: elementname
Example: input will match any element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. "> element. Class selector Selects all elements that have the given class attribute.
Syntax: . classname
Example: .index will match any element that has a class of "index". ID selector Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document.
Syntax: # idname
Example: #toc will match the element that has the ID "toc". Attribute selector Selects all elements that have the given attribute.
Syntax: [ attr ] [ attr = value ] [ attr ~= value ] [ attr |= value ] [ attr ^= value ] [ attr $= value ] [ attr *= value ]
Example: will match all elements that have the autoplay attribute set (to any value).
Grouping selectors
Selector list The , is a grouping method, it selects all the matching nodes.Syntax: A , B
Example: div, span will match both and ) is the generic container for flow content. It has no effect on the content or layout until styled using CSS.">
Combinators
Descendant combinator The (space) combinator selects nodes that are descendants of the first element.Syntax: A B
Example: div span will match all elements that are inside a ) is the generic container for flow content. It has no effect on the content or layout until styled using CSS.">
Syntax: A > B
Example: ul > li will match all element is used to represent an item in a list.">
- element.
General sibling combinator
The ~ combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.
- Chrome
- Firefox
- Safari
- Opera
- Chrome
- Firefox
- Safari
- Opera
- Chrome
- Firefox
- Safari
- Opera
- Chrome
- Firefox
- Safari
- Opera
- Chrome
- Firefox
- Safari
- Opera
- IE7 +
- Firefox
- Chrome
- Safari
- Chrome
- Элемент списка
- Потомок первого элемента списка
- Элемент списка
- Элемент списка
- Chrome
- Firefox
- Safari
- Opera
- Chrome
- Firefox
- Safari
- Opera
- Chrome
- Firefox
- Safari
- Opera
- Chrome
- Firefox
- Safari
- Opera
- Chrome
- Firefox
- Safari
- Opera
- Chrome
- Firefox
- Safari
- Opera
- Chrome
- Firefox
- Safari
- Opera
- Chrome
- Firefox
- Safari
- Opera
- Chrome
- Firefox
- Safari
- Opera
- Chrome
- Firefox
- Safari
- Opera
- Chrome
- Firefox
- Safari
- Opera
- Chrome
- Firefox
- Safari
- Opera
- IE6+ (В IE6 применимо только к ссылкам)
- Chrome
- Firefox
- Safari
- Opera
- Chrome
- Firefox
- Safari
- Opera
- Chrome
- Firefox
- Safari
- Opera
- Chrome
- Firefox
- Safari
- Opera 3.5+
- Android
- IE9+ (IE8 поддерживает first-child, но не last-child. Microsoft (с))
- Chrome
- Firefox
- Safari
- Opera 9.6+
- Android
- Chrome
- Firefox
- Safari 3.0+
- Opera 9.6+
- Android
- Chrome
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
- Chrome
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
- Chrome
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
- Chrome
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
- Chrome
- Firefox 3.5+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
- Chrome
- Firefox 3.5+
- Safari 3.1+
- Opera 9.5+
- Android 2.1+
- iOS 2.0+
Syntax: A ~ B
Example: p ~ span will match all elements that follow a element represents a paragraph.">
, immediately or not.
Adjacent sibling combinator
The + combinator selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent.
Syntax:
A + B
Example:
h2 + p will match all element represents a paragraph.">
elements that directly follow an
.
Column combinator
The || combinator selects nodes which belong to a column.
Syntax:
A || B
Example:
col || td will match all element defines a cell of a table that contains data. It participates in the table model."> elements that belong to the scope of the element defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a element."> .
Pseudo
Pseudo classes
The: pseudo allow the selection of elements based on state information that is not contained in the document tree.
Example:
a:visited will match all element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address."> elements that have been visited by the user.
Pseudo elements
The:: pseudo represent entities that are not included in HTML.
Example:
p::first-line will match the first line of all element represents a paragraph."> elements.
Specifications
Specification
Status
Comment
Что такое селектор в css
– это описание того элемента или группы элементов, которое показывает браузеру какой элемент выбрать для применения к нему стиля. Давайте рассмотрим основные CSS селекторы.
1) .Х
.topic-title {
background-color: yellow;
}
CSS селектор по классу Х
. Разница между id и классом в том, что один и тот же класс может быть у нескольких элементов на странице, а id всегда уникален. Классы стоит использовать для применения одного и того же стиля к нескольким элементам.
2) #X
#content {
width: 960px;
margin: 0 auto;
}
CSS селектор по id
. Знак решетки перед CSS селектором Х выбирает элемент у которого id = Х. Навешивая стили по id всегда стоит помнить, что он должен быть уникальным – только один такой id должен быть на странице. Поэтому лучше использовать селекторы по классам, комбинациям классов или названиям тэгов. Тем не менее, селекторы по id отлично применяются в автоматизированном тестировании, т.к. позволяют сразу взаимодействовать именно с нужным элементом и иметь уверенность что он только один такой на странице.
Какими браузерами поддерживается:
3) *
* {
margin: 0;
padding: 0;
}
CSS селектор всех элементов
. Символ звездочки выбирает все элементы которые есть на странице. Многие разработчики используют его для того, чтобы убрать (обнулить) значения отступов (margin и padding) у всех элементов страницы. Тем не менее, на практике лучше так не делать потому, что этот CSS селектор довольно сильно грузит браузер перебором всех элементов на странице.
Символ * также можно использовать чтобы выделить все дочерние элементы:
#header * {
border: 5px solid grey;
}
В этом примере выделяются все дочерние элементы (потомки) элемента с #header . Но всегда стоит помнить, что этот селектор достаточно тяжел для браузера.
Какими браузерами поддерживается:
4) X
a {
color: green;
}
ol {
margin-left: 15px;
}
CSS селектор типа
. Как выбрать все элементы одного типа, если у них нет ни id ни классов? Стоит использовать CSS селектор по типу элемента. К примеру, чтобы выбрать все упорядоченные списки на странице, используйте ol {...} как это показано выше.
Какими браузерами поддерживается:
5) Х Y
li a {
font-weight: bold;
text-decoration: none;
}
CSS селектор потомков
или CSS селектор дочерних элементов
используется чаще всего. Его используют если необходимо выбрать элементы определенного типа из множества дочерних элементов. Например, нужно выделить все ссылки, которые находятся в элементе li. В этом случае используйте этот селектор. Используя цепочки таких селекторов, всегда спрашивайте себя, а можно ли для выделения данного элемента использовать еще более короткую последовательность селекторов.
Какими браузерами поддерживается:
6) Х + Y
div + p {
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 18px;
}
Смежный селектор элементов
выбирает только
элемент типа Y, который идет сразу после элемента Х. В этом случае каждый параграф следующий сразу после каждого элемента div будет получать специальный тип и размер шрифта.
Какими браузерами поддерживается:
7) Х > Y
#content > ul {
border: 1px solid green;
}
CSS селектор потомков
. Разница между селекторами Х Y и X > Y в том, что рассматриваемый CSS селектор будет выбирать только непосредственные дочерние элементы (выберет только прямых потомков). К примеру:
CSS селектор #content > ul выберет только ul, который является прямым потомком блока div с id="container" . Он не выберет ul, являющийся потомком первого li. Это достаточно выгодный по скорости работы CSS селектор.
Какими браузерами поддерживается:
8) Х ~ Y
ol ~ p {
margin-left: 10px;
}
Селектор сестринских (саблинговых) элементов
менее строгий чем X + Y. Он выберет не только первый, но и все остальные элементы p, идущие за ol.
Какими браузерами поддерживается:
a:link {
color: green;
}
a:visited {
color: grey;
}
Псевдо-класс:link
используется для выбора всех ссылок, на которые еще не кликнули. Если же нужно применить определенный стиль к уже посещенным ссылкам, то для этого используется псевдо-класс:visited
.
Какими браузерами поддерживается:
10) X
a {
color: red;
}
CSS селектор по атрибуту
. В этом примере выбираются только те ссылки, у которых есть атрибут title.
Какими браузерами поддерживается:
11) X
a {
color: yellow;
}
Какими браузерами поддерживается:
12) X
a {
color: #dfc11f;
}
Звездочка означает, что искомое значение должно быть где-нибудь в атрибуте (в любой части атрибута href). Таким образом, будут выбраны и ссылки с https://www..stijit.. Ко всем выбранным ссылкам будет применен золотой цвет.
Какими браузерами поддерживается:
13) X
a {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 15px;
}
На некоторых сайтах рядом со ссылками, ведущими на другие сайты, проставлены небольшие иконки со стрелочками, чтобы показать что это внешние ссылки. Карат “^” – это символ для обозначения начала строки. Таким образом для выбора всех тэгов, у которых href начинается с http, нужно использовать CSS селектор с каратом, как это показано на примере выше.
Какими браузерами поддерживается:
14) X
a {
color: green;
}
Здесь используется регулярное выражение и символ $ для того, чтобы обозначить конец строки. В данном примере мы ищем все ссылки, которые ссылаются на картинки с расширением.jpg.
Какими браузерами поддерживается:
15) X
a {
color: green;
}
Здесь мы применяем CSS селектор по пользовательскому атрибуту
. Добавляем наш собственный атрибут data-filetype в каждую ссылку:
ссылка
Теперь, с помощью приведеного выше CSS селектора, можно выбирать все ссылки ведущие на картинки с любым расширением.
Какими браузерами поддерживается:
16) X
Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных пробелом. Можно прописать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Таким образом можно указать, что ссылка является внешней и ведет на изображение.
ссылка
С помощью такого приема мы можем выбирать элементы с нужными нам комбинациями атрибутов:
/* Выбрать элемент, атрибут data-info которого содержит значение external */
a {
color: green;
}
/* Выбрать элемент, атрибут data-info которого содержит значение image */
a {
border: 2px dashed black;
}
Какими браузерами поддерживается:
17) X:checked
input:checked {
border: 3px outset black;
}
Этот псевдокласс выделяет только такие элементы, как checkbox или radio button, причем только когда они уже в отмеченном состоянии.
Какими браузерами поддерживается:
18) X:after
Псевдоклассы:before и:after очень полезные – они создают контент до и после выбранного элемента.
Clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
Здесь при помощи псевдо-класса:after после блока с классом.clearfix создается пустая строка, после чего очищается. Этот подход используется если невозможно применить свойство overflow: hidden .
Какими браузерами поддерживается:
19) X:hover
div:hover {
background-color: rgba(11,77,130,0.5);
}
Применяет к элементу определенный стиль, когда на него наводится курсор мыши. Старые версии Internet Explorer применяют:hover только к ссылкам.
A:hover {
border-bottom: 1px dotted blue;
}
Какими браузерами поддерживается:
20) X:not(selector)
div:not(#content) {
color: grey;
}
Псевдокласс not (отрицания)
бывает полезен когда, к примеру, нужно выбрать все div, за исключением того, который имеет id="content" .
По такому же принципу можно выбрать все элементы кроме p:
*:not(p) {
color: blue;
}
Какими браузерами поддерживается:
21) X::pseudoElement
p::first-line {
font-weight: bold;
font-size: 24px;
}
Псевдоэлементы могут использоваться для применения стилей к фрагментам элементов – к примеру к первой строке абзаца или первой букве в слове. Применимо только к блочным элементам.
Выбор первой буквы параграфа:
P::first-letter {
font-family: cursive;
font-size: 30px;
font-weight: bold;
padding-right: 1px;
}
Выбор первой строки в параграфе:
P:first-line {
font-size: 28px;
font-weight: bold;
}
Какими браузерами поддерживается:
22) X:first-child
ul li:first-child {
border-top: none;
}
Псевдокласс first-child
выбирает только первого потомка родительского элемента. Часто используется чтобы убрать border в первом элементе списка. Этот псевдокласс был еще начиная с CSS 1
.
Какими браузерами поддерживается:
23) X:last-child
ul > li:last-child {
border-bottom: none;
}
Псевдокласс last-child
выбирает последнего потомка родительского элемента. Он появился только начиная с CSS 3
.
Какими браузерами поддерживается:
24) X:only-child
div p:only-child {
color: green;
}
Псевдокласс only-child
позволяет выбрать те элементы, которые являются единственными потомками для своих родителей.
Какими браузерами поддерживается:
25) X:nth-child(n)
li:nth-child(3) {
color: black;
}
Выбирает дочерний элемент по номеру, указанному в параметре. Селектор nth-child
принимает целое число в качестве параметра, однако отсчет ведется c 1, т.е. если нужно выбрать второй пункт списка, используйте li:nth-child(2) . Все псевдоклассы с использованием nth-child появились только начиная с CSS 3
.
Какими браузерами поддерживается:
26) X:nth-last-child(n)
li:nth-last-child(2) {
color: red;
}
Если у вас большой список элементов в ul и нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(109) , можно использовать селектор последних потомков nth-last-child
. Этот метод такой же как и предыдущий, но отсчет ведется с конца.
Какими браузерами поддерживается:
27) X:nth-of-type(n)
ul:nth-of-type(3) {
border: 1px dotted black;
}
Если на странице есть четыре неупорядоченных списка и нужно применить стиль только к третьему из них, не имеющему уникального id, стоит использовать nth-of-type.
Какими браузерами поддерживается:
28) X:nth-last-of-type(n)
ul:nth-last-of-type(3) {
border: 2px ridge blue;
}
Псевдокласс nth-last-of-type(n)
предназначен для выбора n-ого элемента определенного типа с конца.
Какими браузерами поддерживается:
29) X:only-of-type
li:only-of-type {
font-weight: bold;
}
Псевдокласс only-of-type
выбирает элементы, не имеющие соседей в пределах родительского элемента. К примеру можно выбирать все ul, которые содержат только одинокие li.
Какими браузерами поддерживается:
30) X:first-of-type
ul:first-of-type > li:nth-child(3) {
font-style: italic;
}
Псевдокласс first-of-type
выбирает первый элемент заданного типа.
Какими браузерами поддерживается:
Последнее обновление: 21.04.2016
Определение стиля начинается с селектора. Например:
Div{
width:50px; /* ширина */
height:50px; /* высота */
background-color:red; /* цвет фона */
margin: 10px; /* отступ от других элементов */
}
В данном случае селектором является div . Ряд селекторов наследуют название форматируемых элементов, например, div, p, h2 и т. д.
При определении такого селектора его стиль будет применяться ко всем элементам соответствующих данному селектору. То есть выше определенный стиль будет
применяться ко всем элементам
на веб-странице:
Селекторы CSS
Селекторы CSS
Здесь на странице 3 элемента div, и все они будут стилизованы:
Классы
Иногда для одних и тех же элементов требуется различная стилизация. И в этом случае мы можем использовать классы.
Для определения селектора класса в CSS перед названием класса ставится точка:
RedBlock{
background-color:red;
}
Название класса может быть произвольным. Например, в данном случае название класса - "redBlock". Однако при этом в имени класса разрешается использовать буквы, числа, дефисы и знаки подчеркивания,
причем начинать название класса должно обязательно с буквы.
Также стоит учитывать регистр имен: названия "article" и "ARTICLE" будут представлять разные классы.
После определения класса мы можем его применить к элементу с помощью атрибута class
. Например:
Определим и используем несколько классов:
Классы CSS
Классы CSS
Идентификаторы
Для идентификации уникальных на веб-станице элементов используются идентификаторы, которые определяются с помощью атрибутов id. Например, на странице
может быть головной блок или шапка:
Определение стилей для идентификаторов аналогично определению классов, только вместо точки ставится символ решетки #:
Идентификаторы CSS
Шапка сайта
Основное содержимое
Однако стоит заметить, что идентификаторы в большей степени относятся к структуре веб-странице и в меньшей степени к стилизации. Для стилизации
преимущественно используются классы, нежели идентификаторы.
Универсальный селектор
Кроме селекторов тегов, классов и идентификаторов в css также есть так называемый универсальный селектор
,
который представляет знак звездочки (*). Он применяет стили ко всем элементам на html-странице:
*{
background-color: red;
}
Стилизация группы селекторов
Иногда определенные стили применяются к целому ряду селекторов. Например, мы хотим применить ко всем заголовкам подчеркивание. В этом случае
мы можем перечислить селекторы всех элементов через запятую:
Селекторы CSS
CSS3
Селекторы
Группа селекторов
Некоторый текст...
Группа селекторов может содержать как селекторы тегов, так и селекторы классов и идентификаторов, например:
H1, #header, .redBlock{
color: red;
}
Pseudo
Pseudo classes The: pseudo allow the selection of elements based on state information that is not contained in the document tree.Example: a:visited will match all element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address."> elements that have been visited by the user. Pseudo elements The:: pseudo represent entities that are not included in HTML.
Example: p::first-line will match the first line of all element represents a paragraph.">
elements.
Specifications
Specification | Status | Comment |
---|---|---|
Что такое селектор в css – это описание того элемента или группы элементов, которое показывает браузеру какой элемент выбрать для применения к нему стиля. Давайте рассмотрим основные CSS селекторы.
1) .Х
.topic-title { background-color: yellow; }CSS селектор по классу Х . Разница между id и классом в том, что один и тот же класс может быть у нескольких элементов на странице, а id всегда уникален. Классы стоит использовать для применения одного и того же стиля к нескольким элементам.
2) #X
#content { width: 960px; margin: 0 auto; }CSS селектор по id . Знак решетки перед CSS селектором Х выбирает элемент у которого id = Х. Навешивая стили по id всегда стоит помнить, что он должен быть уникальным – только один такой id должен быть на странице. Поэтому лучше использовать селекторы по классам, комбинациям классов или названиям тэгов. Тем не менее, селекторы по id отлично применяются в автоматизированном тестировании, т.к. позволяют сразу взаимодействовать именно с нужным элементом и иметь уверенность что он только один такой на странице.
- Какими браузерами поддерживается:
3) *
* { margin: 0; padding: 0; }CSS селектор всех элементов . Символ звездочки выбирает все элементы которые есть на странице. Многие разработчики используют его для того, чтобы убрать (обнулить) значения отступов (margin и padding) у всех элементов страницы. Тем не менее, на практике лучше так не делать потому, что этот CSS селектор довольно сильно грузит браузер перебором всех элементов на странице.
Символ * также можно использовать чтобы выделить все дочерние элементы:
#header * { border: 5px solid grey; }
В этом примере выделяются все дочерние элементы (потомки) элемента с #header . Но всегда стоит помнить, что этот селектор достаточно тяжел для браузера.
- Какими браузерами поддерживается:
4) X
a { color: green; } ol { margin-left: 15px; }CSS селектор типа . Как выбрать все элементы одного типа, если у них нет ни id ни классов? Стоит использовать CSS селектор по типу элемента. К примеру, чтобы выбрать все упорядоченные списки на странице, используйте ol {...} как это показано выше.
- Какими браузерами поддерживается:
5) Х Y
li a { font-weight: bold; text-decoration: none; }CSS селектор потомков или CSS селектор дочерних элементов используется чаще всего. Его используют если необходимо выбрать элементы определенного типа из множества дочерних элементов. Например, нужно выделить все ссылки, которые находятся в элементе li. В этом случае используйте этот селектор. Используя цепочки таких селекторов, всегда спрашивайте себя, а можно ли для выделения данного элемента использовать еще более короткую последовательность селекторов.
- Какими браузерами поддерживается:
6) Х + Y
div + p { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 18px; }Смежный селектор элементов выбирает только элемент типа Y, который идет сразу после элемента Х. В этом случае каждый параграф следующий сразу после каждого элемента div будет получать специальный тип и размер шрифта.
- Какими браузерами поддерживается:
7) Х > Y
#content > ul { border: 1px solid green; }CSS селектор потомков . Разница между селекторами Х Y и X > Y в том, что рассматриваемый CSS селектор будет выбирать только непосредственные дочерние элементы (выберет только прямых потомков). К примеру:
CSS селектор #content > ul выберет только ul, который является прямым потомком блока div с id="container" . Он не выберет ul, являющийся потомком первого li. Это достаточно выгодный по скорости работы CSS селектор.
- Какими браузерами поддерживается:
8) Х ~ Y
ol ~ p { margin-left: 10px; }Селектор сестринских (саблинговых) элементов менее строгий чем X + Y. Он выберет не только первый, но и все остальные элементы p, идущие за ol.
- Какими браузерами поддерживается:
Псевдо-класс:link используется для выбора всех ссылок, на которые еще не кликнули. Если же нужно применить определенный стиль к уже посещенным ссылкам, то для этого используется псевдо-класс:visited .
- Какими браузерами поддерживается:
10) X
a { color: red; }CSS селектор по атрибуту . В этом примере выбираются только те ссылки, у которых есть атрибут title.
- Какими браузерами поддерживается:
11) X
a { color: yellow; }- Какими браузерами поддерживается:
12) X
a { color: #dfc11f; }Звездочка означает, что искомое значение должно быть где-нибудь в атрибуте (в любой части атрибута href). Таким образом, будут выбраны и ссылки с https://www..stijit.. Ко всем выбранным ссылкам будет применен золотой цвет.
- Какими браузерами поддерживается:
13) X
a { background: url(path/to/external/icon.png) no-repeat; padding-left: 15px; }На некоторых сайтах рядом со ссылками, ведущими на другие сайты, проставлены небольшие иконки со стрелочками, чтобы показать что это внешние ссылки. Карат “^” – это символ для обозначения начала строки. Таким образом для выбора всех тэгов, у которых href начинается с http, нужно использовать CSS селектор с каратом, как это показано на примере выше.
- Какими браузерами поддерживается:
14) X
a { color: green; }Здесь используется регулярное выражение и символ $ для того, чтобы обозначить конец строки. В данном примере мы ищем все ссылки, которые ссылаются на картинки с расширением.jpg.
- Какими браузерами поддерживается:
15) X
a { color: green; }Здесь мы применяем CSS селектор по пользовательскому атрибуту . Добавляем наш собственный атрибут data-filetype в каждую ссылку:
ссылка
Теперь, с помощью приведеного выше CSS селектора, можно выбирать все ссылки ведущие на картинки с любым расширением.
- Какими браузерами поддерживается:
16) X
Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных пробелом. Можно прописать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Таким образом можно указать, что ссылка является внешней и ведет на изображение.
ссылка
С помощью такого приема мы можем выбирать элементы с нужными нам комбинациями атрибутов:
/* Выбрать элемент, атрибут data-info которого содержит значение external */ a { color: green; } /* Выбрать элемент, атрибут data-info которого содержит значение image */ a { border: 2px dashed black; }
- Какими браузерами поддерживается:
17) X:checked
input:checked { border: 3px outset black; }Этот псевдокласс выделяет только такие элементы, как checkbox или radio button, причем только когда они уже в отмеченном состоянии.
- Какими браузерами поддерживается:
18) X:after
Псевдоклассы:before и:after очень полезные – они создают контент до и после выбранного элемента.
Clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; }
Здесь при помощи псевдо-класса:after после блока с классом.clearfix создается пустая строка, после чего очищается. Этот подход используется если невозможно применить свойство overflow: hidden .
- Какими браузерами поддерживается:
19) X:hover
div:hover { background-color: rgba(11,77,130,0.5); }Применяет к элементу определенный стиль, когда на него наводится курсор мыши. Старые версии Internet Explorer применяют:hover только к ссылкам.
A:hover { border-bottom: 1px dotted blue; }
- Какими браузерами поддерживается:
20) X:not(selector)
div:not(#content) { color: grey; }Псевдокласс not (отрицания) бывает полезен когда, к примеру, нужно выбрать все div, за исключением того, который имеет id="content" .
По такому же принципу можно выбрать все элементы кроме p:
*:not(p) { color: blue; }
- Какими браузерами поддерживается:
21) X::pseudoElement
p::first-line { font-weight: bold; font-size: 24px; }Псевдоэлементы могут использоваться для применения стилей к фрагментам элементов – к примеру к первой строке абзаца или первой букве в слове. Применимо только к блочным элементам.
Выбор первой буквы параграфа:
P::first-letter { font-family: cursive; font-size: 30px; font-weight: bold; padding-right: 1px; }
Выбор первой строки в параграфе:
P:first-line { font-size: 28px; font-weight: bold; }
- Какими браузерами поддерживается:
22) X:first-child
ul li:first-child { border-top: none; }Псевдокласс first-child выбирает только первого потомка родительского элемента. Часто используется чтобы убрать border в первом элементе списка. Этот псевдокласс был еще начиная с CSS 1 .
- Какими браузерами поддерживается:
23) X:last-child
ul > li:last-child { border-bottom: none; }Псевдокласс last-child выбирает последнего потомка родительского элемента. Он появился только начиная с CSS 3 .
- Какими браузерами поддерживается:
24) X:only-child
div p:only-child { color: green; }Псевдокласс only-child позволяет выбрать те элементы, которые являются единственными потомками для своих родителей.
- Какими браузерами поддерживается:
25) X:nth-child(n)
li:nth-child(3) { color: black; }Выбирает дочерний элемент по номеру, указанному в параметре. Селектор nth-child принимает целое число в качестве параметра, однако отсчет ведется c 1, т.е. если нужно выбрать второй пункт списка, используйте li:nth-child(2) . Все псевдоклассы с использованием nth-child появились только начиная с CSS 3 .
- Какими браузерами поддерживается:
26) X:nth-last-child(n)
li:nth-last-child(2) { color: red; }Если у вас большой список элементов в ul и нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(109) , можно использовать селектор последних потомков nth-last-child . Этот метод такой же как и предыдущий, но отсчет ведется с конца.
- Какими браузерами поддерживается:
27) X:nth-of-type(n)
ul:nth-of-type(3) { border: 1px dotted black; }Если на странице есть четыре неупорядоченных списка и нужно применить стиль только к третьему из них, не имеющему уникального id, стоит использовать nth-of-type.
- Какими браузерами поддерживается:
28) X:nth-last-of-type(n)
ul:nth-last-of-type(3) { border: 2px ridge blue; }Псевдокласс nth-last-of-type(n) предназначен для выбора n-ого элемента определенного типа с конца.
- Какими браузерами поддерживается:
29) X:only-of-type
li:only-of-type { font-weight: bold; }Псевдокласс only-of-type выбирает элементы, не имеющие соседей в пределах родительского элемента. К примеру можно выбирать все ul, которые содержат только одинокие li.
- Какими браузерами поддерживается:
30) X:first-of-type
ul:first-of-type > li:nth-child(3) { font-style: italic; }Псевдокласс first-of-type выбирает первый элемент заданного типа.
- Какими браузерами поддерживается:
Последнее обновление: 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; }