Селекторы CSS

CSS-селекторы. Шпаргалка для новичков

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

Основные селекторы

Селекторы типа выбирают элементы HTML-документа по их тегу. Например, селектор p выберет все

на странице:

Селекторы класса определяют стиль элементов с определённым классом. Например, этот селектор выберет абзац с классом .highlight .

Селекторы идентификатора выбирают элемент по его уникальному идентификатору. Например, #welcome соответствует элементу с id=»welcome» :

Селекторы наличия и значения атрибута находят все элементы, которые имеют определённый атрибут или значение атрибута. Например, здесь мы выбираем все ссылки, которые начинаются на http:// , но не имеют example.com .

a[href^="http://"]:not([href*="[example.com](http://example.com/)"])

Универсальный селектор позволяет прописать стили для всех элементов HTML без исключения. Он указывается в виде звёздочки * . В примере ниже мы используем универсальный селектор с псевдоэлементами, чтобы изменить расчёт общего размера элемента.

Селекторы-комбинаторы

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

Соседний родственный комбинатор

Записывается как селектор1 + селектор2 . Выбирает элемент, подходящий под селектор2 , перед которым расположен элемент, подходящий под селектор1 .

 
Сегодня я стал великим фронтендером.
 
Я написал стили для текста.
 

Селектор .first + .second применит стили к абзацу с классом .second , потому что перед ним есть элемент с классом .first . Предложение «Я написал стили для текста.» станет белым.

Дочерний комбинатор

Записывается как селектор1 > селектор2 . Выбирает элементы, которые являются прямыми потомками элемента, подходящего под селектор1 .

 
Я выучил CSS
 
Ну селекторы точно знаю.
 
 
 

Стили применятся только к «Я выучил CSS», этот текст станет красным.

Общий родственный комбинатор

Записывается как селектор1 ~ селектор2 . Добавляет стили для элемента, который соответствует селектор2 , если перед ним стоит элемент, подходящий под селектор1. Оба элемента должны принадлежать одному родителю.

 
Это было прекрасное раннее утро. Идеальное время, чтобы приготовить чашку кофе или чая, открыть ноутбук и выучить CSS.
 
Так Вовка и поступил. Погладил кота, набрался решимости и открыл для себя новый мир вёрстки.
 
 

Стили применятся ко второму параграфу, появится внешний отступ сверху.

Этот селектор отличается от соседнего селектора тем, что между элементами селектор1 и селектор2 могут находиться другие элементы.

Комбинатор потомка

Записывается как селектор1 селектор2 . Находит все потомки элемента, который подходит под селектор1 , и применяет к ним стили.

Оказалось, что селекторы — это не так страшно, как я думал. Нужно только немного попрактиковаться, и всё сразу станет ясно. 
 

Здесь в синий цвет окрасятся «не так страшно» и «всё сразу станет ясно.».

Селекторы псевдоклассов

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

💡 Простой селектор — это селектор по одному условию, односоставной.

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

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

В этом примере мы меняем цвет ссылки на красный, когда пользователь кликает по ней.

:hover

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

:active

Псевдокласс :active соответствует элементу, на который активно нажимают. Здесь псевдокласс используется для скругления рамок кнопки, когда на неё кликают:

:visited

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

:focus

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

:first-child , :last-child и :nth-child(n)

Эти псевдоклассы выбирают элемент по его порядковому номеру. :first-child соответствует первому дочернему элементу родителя, :last-child — последнему. А псевдокласс :nth-child(n) указывает на n -й дочерний элемент. Например, с его помощью можно выбрать второй, пятый или предпоследний элемент. Вместо n в скобках указывается целое число или математическое выражение.

/* выберет первый элемент — HTML*/ li:first-child < font-weight: 700; >/* выберет последний элемент — JavaScript*/ li:last-child < text-decoration: underline; >/* выберет второй элемент — CSS*/ li:nth-child(2)

:first-of-type**,** : last-of-type и** ** : nth-of-type (n)`

Эти псевдоклассы похожи на предыдущие. Они тоже выбирают элемент по его порядковому номеру, но только с учётом типа — тега.

 
Первый параграф
 
Второй параграф
 
Выделенный текст 
Третий параграф
 
Четвёртый параграф
 
 
Пятый параграф
 Выделенный текст 
 

/*Текст в первом теге 
будет жирным*/ p:first-of-type < font-weight: 700; >/*Текст во втором теге 
будет подчёркнут*/ p:nth-of-type(2) < color: green; >/*Текст в последнем теге 
будет подчёркнут*/ p:last-of-type

«Первый параграф» и «Третий параграф» станут жирными. «Второй параграф и «Четвёртый параграф» окрасятся в зелёный. «Четвёртый параграф» и «Пятый параграф» будут подчёркнутыми.

Если мы используем здесь first-child , nth-child(2) и last-child , то получим другую картину. Жирным станет только «Первый параграф». В зелёный окрасятся «Второй параграф» и «Третий параграф». Подчёркнутым будет «Четвёртый параграф». И всё это из-за того, что между

есть другие элементы — .

:empty

Псевдокласс :empty — это селектор CSS, который соответствует элементам, не имеющим дочерних элементов, включая текстовые узлы и другие элементы. Его можно использовать для стилизации элементов, которые пусты или не имеют содержимого:

В этом примере мы с помощью :empty добавляем красную рамку пустому инпуту.

Заключение

Мы разобрали самые популярные селекторы, но на самом деле их больше. Полный перечень вы найдёте в спецификации W3C. А чтобы научиться использовать селекторы на практике, пройдите эти тренажёры из курса «Старт в программирование».

Ещё статьи про CSS

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Стиль для потомков css

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

Например, пусть элемент body на веб-странице имеет следующее содержимое:

Внутри элемента body определено три вложенных элемента: h2, div, p. Все эти элемены являются потомками элемента body.

А внутри элемента div определен только один вложенный элемент — p, поэтому элемент div имеет только одного потомка.

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

     #main p < font-size: 16px; >#footer p  
Первый абзац
 
Второй абзац
 
 
Текст футера
 
   

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

То есть данный стиль будет применяться только к тем элементам p, которые находятся внутри элемента с идентификатором main.

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

Источник

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

Селекторы потомков CSS предназначены для применения стилей ко всем потомкам указанного элемента. Эти селекторы являются составными, то есть складываются из простых селекторов (классы, идентификаторы, селекторы тегов и т.д.), которые мы с вами изучали в прошлых уроках.

Как вы знаете из учебника по HTML, элемент является потомком для другого элемента (предка), когда он находится внутри него на любом уровне вложенности. Если подзабыли, то давайте еще раз повторим, рассмотрев такой пример:

В этом примере все элементы являются потомками элемента , но вместе с этим еще и потомок элемента .

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

Пример использования селекторов потомков в CSS

       
внутри DIV1.
 
внутри DIV1.
 
 
внутри DIV2.
 
внутри DIV2.
 
 
 

С помощью селекторов потомков очень удобно изменять стили элементов, когда у сайта уже есть много страниц и не хочется вносить изменения в существующий HTML-код. Поэтому рекомендую вам еще на этапе создания макета страниц присвоить основным блокам уникальный id , например id= «header» для шапки сайта, id= «footer» для нижней части и так далее. Тогда, даже если у вас в разных участках будут попадаться одинаковые элементы (например, с одним и тем же классом) — вы во многих случаях сможете изменить какой-либо из них, всего лишь подправив один файл с таблицей стилей.

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

Селекторы потомков и универсальный селектор

То, что мы с вами уже изучили о селекторах потомков очень полезно и одновременно просто, не правда ли? Но многие верстальщики, причем не только новички, но и профессионалы, подчас забывают об их очень полезном сочетании с универсальным селектором, позволяющем иногда серьезно сократить объем CSS-кода. Особенно, если надо изменить стили у нескольких элементов находящихся на одном уровне вложенности.

Пример совместного использования селекторов потомков и универсального селектора в CSS

        
Параграф1.
 
Параграф2. Span.
 
Параграф3. Strong.
 
  

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

1. Создайте трехколоночный макет с шапкой и футером (без использования таблиц).
2. Вставьте в шапку страницы логотип сайта в виде ссылки-изображения.
3. Создайте в левой и правой колонке по меню на основе списков. Пусть в левом меню половина ссылок будет черного цвета и половина — красного, а в правом меню — половина черного и половина — синего.
4. Сделайте в футере страницы горизонтальное меню на основе списка, а не просто ссылок в блоке. Используйте для этого свойство display. Да, и пусть это меню располагается по центру страницы.
5. Напишите в центральной части страницы несколько параграфов, а между ними укажите ссылку-изображение и разместите ее по центру.
6. Уберите поля по краям страницы, рамки у ссылок-изображений и маркеры у списков.

• Введение
• Что такое CSS?
• Синтаксис CSS
• Подключение CSS
• Типы устройств
• Базовый синтаксис
• Значения и единицы измерения CSS
• Комментарии в CSS
• Селекторы CSS
• Селекторы тегов
• Селекторы атрибутов
• Универсальный селектор
• Классы
• Идентификаторы
• Селекторы потомков
• Дочерние селекторы
• Соседние селекторы
• Псевдоклассы
• Псевдоэлементы
• Обработка CSS
• Наследование
• Приоритеты стилей

Copyright © 2010-2015 seodon.ru Все права защищены.

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

Источник