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

Если в селекторе правила CSS указан символ "*", то это правило применяется ко всем элементам страницы без исключения. Сложно представить себе случай, когда такое правило имеет смысл. Но есть один случай когда разработчик хочет "обнулить" все внешние и внутренние отступы. Тогда нужно использовать такой стиль:

* { margin: 0; padding: 0; }

Но символ "*" можно использовать в составных селекторах.

Ul * {color: red}

Этот код назначает красный цвет тексту всех потомков элемента

.

Классы

Классы в CSS - самый расрпостранённый способ назначения стиля группе элементов. Класс применяют когда нужно задать разные стили элементам html-документа, созданным одним тегом. Синтаксис класса:

Тег.Имя класса

В селекторе стиля вначале пишется нужный тег, затем, через точку указывается имя класса. Имя класса должно начинаться с латинской буквы и может содержать в себе символы дефиса (-) и подчеркивания (_).

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

, этим трём меню нужно создать три различных стиля. В CSS создают три класса ul.menu-top , ul.menu и ul.menu-bottom .

В теле html-документа различные меню создаются с указанием класса в атрибуте class :

class ="menu-top "> ...


class ="menu "> ...


class ="menu-bottom "> ...

Классы - часто используемы инструмент CSS. Он удобен и, кроме того, делает код стиля более читаемым.

Можно создать класс, который будет применён к любому тегу. Для этого используется универсальный селектор.

*.Имя класса { свойство1 : значение ; свойство2 : значение ; ... }

Эту запись можно сократить, убрав символ "*".

Имя класса { свойство1 : значение ; свойство2 : значение ; ... }

ID селекторы (идентификаторы)

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

При описании идентификатора вначале указывается символ решётки (#), затем идет имя идентификатора.

#Имя идентификатора { свойство1 : значение ; свойство2 : значение ; ... }

Также, как и имя класса, имя идентификатора должно начинаться с латинской буквы и может содержать в себе символы дефиса (-) и подчеркивания (_).

Селекторы атрибутов

В HTML есть ряд тегов, которые в зависимости от атрибутов меняют своё действие. Например, тег зависимости от значения атрибута type может создавать поле формы, кнопку и другие элементы формы. Так что, если применять стиль к селектору input , то он изменит все элементы формы, созданные этим тегом. Для точного управления такими элементами в CSS существуют селекторы атрибутов.

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

Селекторы атрибутов - тема отдельной большой статьи. В рамках этой статьи мы лишь отметим, что они есть.

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

Ещё одна большая тема в CSS - псевдоклассы. Приставка "псевдо" обозначает мнимость или ложность. Дело в том, это элементы html документа меняются в зависимости от действий пользователя. Например ссылка меняется в зависимости от наведения на неё курсора.

При помощи псевдоклассов создаются динамические эффекты на странице.

Синтаксис псевдокласса:

Селектор:псевдокласс { свойство1 : значение ; свойство2 : значение ; ... }

Можно применять псевдоклассы к селекторам идентификаторов или классов (ul.menu:hover {color : green }).

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

Псевдокласс :active выполняет правило стиля, если элемент активен. Например, на ссылку наведён курсор и произведён клик. Псевдокласс :hover - курсор мыши просто наведён на элемент, например на ссылку.

Есть ещё много псевдоклассов. Полностью раскрыть тему псевдоклассов можно в рамках отдельной статьи. Тут мы коснулись её лишь поверхностно.

Псевдоэлементы

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

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

Синтаксис псевдоэлементов такой же, как и у псевдоклассов:

Селектор:псевдоэлемент { свойство1 : значение ; свойство2 : значение ; ... }

Совокупность правил оформления (которые в свою очередь состоят из селекторов с блоком объявлений) примененных к определенным 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 страниц.

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

Влад Мержевич

Идентификатор (называемый также «ID селектор») определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты.

Синтаксис применения идентификатора следующий.

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

Влад Мержевич

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

Для обозначения универсального селектора применяется символ звёздочки (* ) и в общем случае синтаксис будет следующий.

* { Описание правил стиля }

Селекторы атрибутов

Влад Мержевич

Многие теги различаются по своему действию в зависимости от того, какие в них используются атрибуты. Например, тег может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счёт изменения значения атрибута type . При этом добавление правил стиля к селектору INPUT применит стиль одновременно ко всем созданным с помощью этого тега элементам. Чтобы гибко управлять стилем подобных элементов, в CSS введены селекторы атрибутов.

Дочерние селекторы

Влад Мержевич

Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Чтобы лучше понять отношения между элементами документа, разберём небольшой код (пример 12.1).

Пример 12.1. Вложенность элементов в документе

HTML5 CSS 2.1 IE Cr Op Sa Fx

Соседние селекторы

Влад Мержевич

Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа. Рассмотрим несколько примеров отношения элементов.

Lorem ipsum dolor sit amet.

В этом примере тег является дочерним по отношению к тегу

Поскольку он находится внутри этого контейнера. Соответственно

Выступает в качестве родителя .

Контекстные селекторы

Влад Мержевич

При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определённом контексте. Например, задать стиль для тега только когда он располагается внутри контейнера

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

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

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

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

Создание CSS правил в 2 словах

Каскадная таблица стилей представляет собой набор CSS правил, каждое из которых призвано форматировать определенный элемент веб-страницы. Само правило состоит из 2 частей:

1. Селектор
2. Блок объявлений

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

1. Свойство
2. Значение

Свойство служит для выбора параметра, который мы будем настраивать.

Селектор тегов

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

P {
font-family: Verdana;
}

Если мы захотим принять шрифт Verdana для заголовков первого уровня, будет справедлива следующая запись:

H1 {
font-family: Verdana;
}

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

Групповой вид селекторов

Создание одинаковых блоков объявлений для разных тегов не является ошибкой. Однако, для грамотных веб-мастеров подобная запись неприемлема. В примере выше мы придали одинаковый шрифт для 2 тегов, причем сделали это создав два отдельных правила, хотя можно было обойтись и одним. Для этого достаточно перечислить форматируемые теги через запятую:

P, h1 {
font-family: Verdana;
}

Групповой вид селекторов очень удобен и способен значительно сократить объем css файла. Как уже было сказано до этого, достаточно перечислить форматируемые теги через запятую.

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

А что делать если нужно придать одни и те же значения для всех элементов веб-страницы? Перечислить все теги через запятую? Вовсе не обязательно, вместо перечислений всех тегов стоит просто указать "*". Да, именно звездочку, при помощи которой выделяются все элементы веб-страницы.

* {
font-family: Verdana;
}

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

Как видно из названия, при помощи этого вида селекторов мы выбираем элементы по определенным классам. При необходимости в форматировании блочных элементов с классом "container" используется следующая запись:

Container {
font-family: Verdana;
}

Достаточно прописать точку и название класса. Хочется отметить что все элементы, вложенные в блочный элемент с классом "container" также будут отформатированы.

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

Здесь та же история как и с классами. Разница лишь в том что вместо точки мы прописываем - "#". Для форматирования абзаца с id "unique" необходима следующая запись:

#unique {
font-family: Verdana;
}

Древовидная форма HTML

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

Для решения этой проблемы будет нелишним освежить память и вспомнить отношения тегов между собой в HTML.


древовидная форма HTML

Как видно из иллюстрации выше, тег body является предком для всех остальных тегов. Вложенный в него тег div является его дочерним элементом, сам будучи родителем тегов h2, p и предком тега a. А маркированный список первого уровня имеет 3 дочерних (li, ul) и 2 потомственных элемента (li).

Все вышеперечисленные теги вписываются в три вида отношений:

1. предок - потомок
2. родитель - дочерний элемент
3. сестринские элементы (теги одного уровня с общим родителем)

Важно понимать, что в момент форматирования какого-либо элемента часто его потомки наследуют эти же свойства. Для точечной настройки определенных тегов существуют специальные селекторы, с которыми мы познакомимся дальше.

Селектор потомков

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

Div p {
color: blue;
}

Вначале мы указываем предка, затем через пробел - потомственный элемент. Запись выше означает: "Отобразите синим цветом все абзацы находящиеся внутри тега div". Для форматирования всех ссылок внутри абзаца мы пишем следующее:

P a {
color: red;
}

Запись выше означает: "Отобразите красным цветом все ссылки, находящиеся внутри абзацев". Как видите - все очень просто.

Дочерние селекторы

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

Все бы хорошо, но это порождает определенные проблемы. "Какие именно?" - спросите вы. Ну, хотя бы то что в случае придания определенных свойств "предку" они унаследуются потомственными элементами. Чтобы мы могли точечно выбирать элементы для форматирования, были придуманы некоторые виды селекторов, в том числе и дочерний.

Давайте представим что нам необходимо воздействовать только на дочерние абзацы блока с классом "info", потомственные нас не интересуют. Для этого мы используем дочерний селектор:

Info>p {
font-family: Arial;
}

Запись выше означает: "Отобразить шрифтом Arial все абзацы, являющиеся дочерними блоку с классом info". Если же нам нужно выделить дочерние пункты маркированного списка, аналогично пишем следующее:

Ul>li {
color: blue;
}

Запись выше означает: "Перекрасить все дочерние пункты маркированного списка в синий цвет". Такое правило CSS вполне может пригодиться, ведь внутри одного списка вполне может располагаться другой.

В некоторых случаях может возникнуть необходимость выделения не всех дочерних элементов, а только некоторых. Для управления первым дочерним элементов необходимо воспользоваться псевдоэлемнтом :first-child

Wrapper:first-child {
font-family: Tahoma;
}

Правило выше означает: "Отобразить первый дочерний элемент класса "wrapper" шрифтом Tahoma".

Псевдоэлемент :last-child помогает управлять последним дочерним элементом:

Wrapper:last-child {
font-family: Tahoma;
}

У нас также есть возможность выбирать любой по счету дочерний элемент при помощи псевдоэлемента :nth-child

Wrapper:nth-child(even) {
color: pink;
}

Запись выше означает: "Выделить все чётные дочерние элементы класса "wrapper" розовым цветом". Для выделения нечетных элементов even нужно заменить на odd .

Для выделения каждого 5 элемента необходимо добавить 5n. Если же стоит выделить каждый 4-й элемент начиная с шестого необходимо в скобках указать - 4n+6. Значения в скобках можно менять по-своему усмотрению:

Wrapper:nth-child(3n+2) {
border-bottom: 1px solid black;
}

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

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

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

A:link Отвечает за внешний вид ссылки в спокойном состоянии a:hover Отвечает за внешний вид ссылки в момент наведения на неё курсором мыши a:active Отвечает за внешний вид ссылки в момент нажатия на неё a:visited Отвечает за внешний вид уже посещенной ссылки

Пример того, как могут быть использованы эти псевдоклассы:

A:link {
color: blue;
}

a:hover {
color: orange;
}

a:active {
color: red;
}

a:link {
color: grey;
}

Запись выше означает: "Выделить синим цветом ссылки в обычном состоянии. Отображать их оранжевым цветом в момент наведения по ним. Отображать ссылки красного цвета в момент нажатия. Выделить серым цветом уже посещенные ссылки."

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

Этот псевдокласс можно использовать не только по отношению к ссылкам, ведь мы можем наводить мышкой на любые другие элементы веб-страницы. Например:

Img:hover {
border: 1px solid grey;
}

Запись выше означает: "Выделить все изображения рамкой серого цвета в момент наведения по ним." Таким же образом можно настраивать любые другие элементы в момент проведения по ним курсором.

Псевдоэлементы

При помощи псевдоэлементов :before и :after мы можем добавлять тот или иной контент впереди или в конце элементов веб-страницы. При необходимости добавить что-нибудь впереди абзацев мы пишем следующее:

P.attention:before {
content: "Внимание!";
}

Запись выше означает: "Добавить слово "Внимание!" перед абзацами с классом attention". Для добавления в конце элемента мы пишем:

P.attention:after {
content: "Внимание!";
}

Псевдоэлемент :focus помогает управлять внешним видом полей для ввода:

Input:focus {
background-color: blue;
font-style: italic;
}

Запись выше означает - "Окрасить фон полей для ввода в синий цвет и использовать курсивное начертание шрифта в момент набора текста".

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

::selection {
color: white;
background-color: black;
}

Правило выше означает: "Отображать фон черным, а цвет шрифта белым в момент выделения текста". Этот селектор незнаком для браузера Firefox, и для решения этой задачи необходимо перед правилом добавить следующее:

::-moz-selection {
color: white;
background-color: black;
}

Дочерние элементы по типу

Данный вид селекторов ценен тем, что мы можем управлять не просто дочерними элементами, а теми которые относятся к определенному типу.

Например, мы можем выделить первый дочерний нумерованный список блока с классом container:

Container>ol:first-of-type {
color: yellow;
}

Плюс ко всему мы имеем в распоряжении псевдоэлементы :last-of-type и :nth-of-type , которые имитируют:last-child и:nth-child соответственно.

#main>h2:last-of-type {
color: yellow;
}

В примере выше мы выделили последний дочерний заголовок второго уровня относящийся к блоку с идентификатором main.

Селектор смежных элементов

При помощи данного вида селекторов мы можем форматировать определённый фрагмент веб-страницы, но при условии что ему предшествуют другой элемент. Например, нам нужно выделить каждый первый абзац после заголовка первого уровня. Для этого мы создаем следующее правило:

H1+p {
font: italic 20px Arial;
}

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

H1~ul {
color: orange;
}

Селектор атрибутов

Используя этот вид селектора можно форматировать элементы выбрав их по атрибуту. Для управления всеми внешними ссылками нужно указать следующее:

A {
color: aqua;
}

Запись href^="http://" означает что необходимо выделить все ссылки, начинающиеся на http://. Такие css правила имеют место быть, потому что абсолютные адреса в основном используются для внешних ссылок.

A {
color: brown;
}

У вас может возникнуть ситуация, когда нужно выделить те изображения, которые содержат в своем названии определенное слово. Возьмем к примеру интернет-магазин, где нужно сделать рамку для изображений футбольных бутс. С большой долей вероятности их названия содержат в себе слово boots. В таком случае создаем ccs правило:

Img {
border: 2px dashed grey;
}

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

Для выделения всех изображений, находящихся в блоке с классом relative мы создаем следующее css правило:

Relative {
border: 2px dashed grey;
}

Псевдокласс отрицания

Если вам когда-нибудь приходилось иметь дело с движком WordPress, вы должны знать что в ней все ссылки имеют абсолютный вид. Как мы рассматривали выше, при необходимости выделить внешние ссылки можно использовать селектор по атрибуту, те которые начинаются на http://. Как вы понимаете, такой вариант решения вопроса с движком WordPress не прокатит. Но у нас в арсенале есть гениальный псевдокласс отрицания, который мы можем задействовать:

A:not() {
border: 2px dashed brown;
}

Правило выше означает: "Выделить коричневым цветом все ссылки, начинающиеся на http:// кроме тех, которые начинаются на http://mysite.com". Псевдокласс отрицания можно использовать не только с селекторами атрибутов, но и с другими простыми селекторами.

Стоит знать что для каждого селектора можно использовать только один псевдокласс отрицания. Следующая запись будет неверной - .container:not(#info):not(h3)

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

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

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

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

Селекторы в CSS

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

P{
Стили…
}

В данном случае селектором выступает p – тег абзацев. Такое правило добавит стили для всех абзацев на веб-странице.

Какими бывают css селекторы?

Селектор тега – самый простой . Он был продемонстрирован в примере. Чтобы записать его в css, нужно написать имя тега без угловых скобок. Стили будут применены ко всем элементам с таким тегом.
Table{} – стили для всех таблиц
Li{} – стили для всех пунктов списка
A{} – стили для всех ссылок

Стилевой класс – к любому элементу на веб-странице можно привязать стилевой класс. Даже к одной букве. Потом в css-файле можно обратиться к этому элементу, прописав для него собственные стили. Для этого нужно поставить точку и написать имя стилевого класса после нее. Примеры:
.about{} – правила применятся ко всем элементам, которые имеют атрибут class = “about”
.down{} – правила применятся ко всем элементам, которые имеют атрибут class = “down”
.float{} – правила применятся ко всем элементам, которые имеют атрибут class = “float”

Как видите, главное поставить точку. Стилевой класс можно привязывать к неограниченному количеству элементов. Элементу можно прописать несколько классов.

Идентификатор – еще один вид селекторов. Один идентификатор можно задать только одному элементу. Он не может иметь двух идентификаторов, а также id привязанный к этому элементу, не может быть прописан нигде более.

Задается он так:

Абзац

То есть также, как и класс, только используется атрибут id в качестве значения которого используется любое слово.

Чтобы обратиться к элементу с идентификатором через css нужно написать значение id и перед ним поставить решетку.

#first{
Font-size: 22px
}

Мы обратились к абзацу с id = first . Стиль применится только к нему. У остальных абзацев размер шрифта не изменится.

Facebook
Twitter
Вконтакте
Google+
Ноутбук