Главная » Языки программирования

Какие виды селекторов бывают html

Содержание
  1. CSS-селекторы. Шпаргалка для новичков
  2. Основные селекторы
  3. Селекторы-комбинаторы
  4. Соседний родственный комбинатор
  5. Дочерний комбинатор
  6. Общий родственный комбинатор
  7. Комбинатор потомка
  8. Селекторы псевдоклассов
  9. :hover
  10. :active
  11. :visited
  12. :focus
  13. :first-child , :last-child и :nth-child(n)
  14. :first-of-type**,** : last-of-type и** ** : nth-of-type (n)`
  15. :empty
  16. Заключение
  17. Ещё статьи про CSS
  18. Css-селекторы
  19. Селекторы из CSS1
  20. Селекторы из CSS2
  21. Сайдбар
  22. Статьи
  23. Страницы
  24. Проекты

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

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

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

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

на странице:

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

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

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

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

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

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

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

Пример DOM-дерева. Здесь html — родитель для head и body. В свою очередь head — родитель для meta и title, а body — для header и main

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

Записывается как селектор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 , то получим другую картину. Жирным станет только «Первый параграф». В зелёный окрасятся «Второй параграф» и «Третий параграф». Подчёркнутым будет «Четвёртый параграф». И всё это из-за того, что между

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

Слева стилизуем текст с помощью селекторов *-of-type, справа — *-child

:empty

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

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

Заключение

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

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

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

Источник

Css-селекторы

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

Селекторы делятся на несколько видов:

  • по типу ( H1 , TD , HR . );
  • универсальный селектор — * — обозначает элемент любого типа;
  • селекторы атрибутов ( [data-name] , [data-name$=»hidden»] );
  • селекторы по классу ( .main , .header__nav );
  • селекторы по ID ( #form , #submit );
  • псевдо-классы:
    • динамические ( :hover и т.д.);
    • селектор цели ( :target );
    • селектор по языку ( :lang(en) );
    • состояния элементов интерфейса ( :enabled , :checked . );
    • структурные псевдоклассы ( :root , :nth-child );
    • псевдокласс отрицания ( :not(P) ).

    Селекторы ниже сгруппированы по спецификациям. Это поможет нам понять какие из них работают везде (из CSS1), какие работают почти везде (из CSS2), а какие кое-где могут и не работать.

    Селекторы из CSS1

    Самые простые и хорошо всем знакомые:

    • обращение к элементу по тегу ( BODY , A , TABLE и т.д.);
    • по ID ( #main );
    • по классу ( .header-image );
    • обращение к потомку через родителя ( UL A , .sidebar .widget );
    • состояния ссылок A:link , A:visited , A:hover ;
    • псевдоэлемент для первой строки текста — P::first-line ;
    • псевдоэлемент для первого символа в тексте — P::first-letter .

    Селекторы из CSS2

    В этой спецификации добавилось много интересного:

    • * — универсальный селектор. Например, * уберет отступы у всех элементов на странице.
    • E[foo] — элементы с заданым атрибутом. Например, код: 
    P[data-content]  border: 2px solid crimson; >
    P[data-content="hello"]  border: 2px solid orange; >
    P[data-content~="hello"]  border: 2px solid yellowgreen; >
    P[data-content|="hello"]  border: 2px solid steelblue; >
    P:first-child  background: gold; >
    P:lang(ru)  background: crimson; >
    DIV > A  background: darkviolet; color: #FFF; >
    P + H3  background: darkturquoise; color: lightseagreen; >

    Сайдбар

    Статьи

    • Математические функции в CSS
    • Адаптивное видео с помощью встроенных математических функций CSS
    • Недоступность в картинках
    • Единицы размеров в CSS
    • Генератор цветовых тем
    • Jekyll → Gatsby
    • Вариативные шрифты
    • Размеры в SVG
    • Адаптивный Pixel Perfect
    • Логотип не отвечает или временно недоступен
    • SVG-паттерны
    • Мыльные пузыри на SVG
    • SVG-градиенты
    • Весёлая консолька
    • SVG-маски
    • Умная прокрутка со Scroll Snap Points
    • CSS-анимации для ротации изображений
    • Анимированные SVG-маски
    • Странности обводки в SVG
    • SVG-прелоадеры
    • Анимируем градиенты ещё раз
    • Background-blend-mode
    • Возможности оформления SVG
    • CSS и SVG маски
    • Nth-child и nth-of-type
    • SVG-иконки
    • SVG: заливка и обводка
    • SVG-path
    • SVG: группировка и переиспользование элементов
    • SVG-фигуры и трансформации
    • SVG
    • СSS-градиенты и 3D
    • Рисовалка анимированных теней
    • Свежие CSS-паттерны
    • CSS-паттерны
    • Радиальные градиенты
    • Линейные градиенты
    • Крестики-нолики на CSS
    • Border-image
    • Электронные часы на CSS и JS.
    • Сколько весят селекторы?
    • Символы юникода
    • Свойство content
    • Анимируем CSS-градиенты
    • Текстовые эффекты
    • Древовидный список на CSS
    • Css-селекторы, часть 2
    • Css-селекторы
    • Контекст наложения
    • Два способа «прошить» элемент по краю
    • Box-sizing
    • Цвета в CSS
    • Фон под строчками: добавляем поля
    • Box-shadow
    • Css-фигуры: лепесток
    • Transform
    • Css Animation
    • 3D-куб
    • Border-radius
    • First letter
    • Эти глаза напротив
    • CSS-фигуры
    • Стрелки с помощью свойства border
    • Flexbox

    Страницы

    Проекты

    Источник

    Читайте также:  CSS Font Family
Оцените статью
© 2024 Программирование