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

Селекторы выбора в html

Содержание
  1. CSS selectors
  2. Reference
  3. Combinators and seperators
  4. Selectors
  5. Terms
  6. Guides
  7. Related concepts
  8. Specifications
  9. See also
  10. Found a content problem with this page?
  11. Селекторы CSS
  12. Что такое селекторы?
  13. Несколько селекторов
  14. Типы селекторов
  15. Селекторы тегов, классов и идентификаторов
  16. Селекторы атрибутов
  17. Псевдоклассы, псевдоэлементы
  18. Комбинаторы
  19. Продолжение
  20. Справка о селекторах
  21. В этом модуле
  22. Found a content problem with this page?
  23. CSS селекторы
  24. Комбинаторы
  25. Псевдо-классы
  26. Псевдо-элементы

CSS selectors

The CSS selectors module defines the patterns to select elements to which a set of CSS rules are then applied along with their specificity . The CSS selectors module provides us with more than 60 selectors and five combinators. Other modules provide additional pseudo-class selectors and pseudo-elements.

In CSS, selectors are patterns used to match, or select, the elements you want to style. Selectors are also used in JavaScript to enable selecting the DOM nodes to return as a NodeList .

Selectors, whether used in CSS or JavaScript, enable targeting HTML elements based on their type, attributes, current states, and even position in the DOM. Combinators allow you to be more precise when selecting elements by enabling selecting elements based on their relationship to other elements.

Reference

Combinators and seperators

Selectors

Terms

  • Pseudo-class glossary term
  • Functional pseudo-classes
  • Combinators
  • Simple selector
  • Compound selector
  • Complex selector
  • Relative selector
  • Selector list
  • Specificity

Guides

Overview of the different types of simple selectors and various combinators defined in the CSS selectors and the CSS pseudo modules.

Explanation of the structure of CSS selectors and the terminologies introduced in the CSS selectors module, ranging from «simple selector» to «forgiving relative selector list».

Читайте также:  Javascript язык программирования учить

Lists the pseudo-classes, selectors that allow the selection of elements based on state information that is not contained in the document tree, defined in the various CSS modules and HTML.

Learn how to use the :target pseudo-class to style the target element a URL’s fragment identifier.

Learn the different UI pseudo-classes available for styling forms in different states.

The selectors API enables using selectors in JavaScript to retrieve element nodes from the DOM.

  • :popover-open pseudo-class
  • CSS scoping module
    • :host pseudo-class
    • :host() pseudo-class
    • :host-context() pseudo-class
    • ::slotted pseudo-element
    • ::after
    • ::before
    • ::file-selector-button
    • ::first-letter
    • ::first-line
    • ::grammar-error
    • ::marker
    • ::placeholder
    • ::selection
    • ::spelling-error
    • ::target-text
    • ::part pseudo-element
    • ::backdrop
    • ::cue
    • ::cue-region

    Specifications

    See also

    Found a content problem with this page?

    This page was last modified on Jul 21, 2023 by MDN contributors.

    Your blueprint for a better internet.

    Источник

    Селекторы CSS

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

    Необходимые знания: Базовая компьютерная грамотность, основное программное обеспечение, понимание работы с файлами, базовые знания HTML (смотрите Введение в HTML), и представление о том, как работает CSS (смотрите Введение в CSS).
    Цель: Узнать, как работают CSS-селекторы.

    Что такое селекторы?

    Вы уже встречались с селекторами. Это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля.

    Some code with the h1 highlighted.

    Ранее вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент h1 или класс .special .

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

    Несколько селекторов

    Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в лист селекторов: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка h1 и класса .special ; я могу написать их так:

    h1  color: blue; > .special  color: blue; >

    А могу написать короче — просто отделив селекторы запятыми:

    Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:

    В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же.

    При объединении селекторов таким образом, при условии если хоть один селектор будет недействительным, всё правило будет пропущено.

    В примере ниже правило для селектора класса не будет работать, в то время как h1 будет стилизован.

    h1  color: blue; > ..special  color: blue; >

    Но если мы объединим селекторы, правило не применится ни к h1 , ни к классу: оно считается недействительным.

    Типы селекторов

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

    Селекторы тегов, классов и идентификаторов

    К этой группе относятся селекторы HTML-элементов, таких как .

    К группе относятся и селекторы классов:

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

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

    Эта группа селекторов позволяет выбирать селекторы, основываясь на наличии у них конкретного атрибута элемента:

    или основываясь на значении атрибута:

    Псевдоклассы, псевдоэлементы

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

    К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, ::first-line всегда выбирает первую строку внутри элемента (абзаца

    в нашем случае), действуя, как если бы тег оборачивал первую строку, а затем был стилизован.

    Комбинаторы

    И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент с помощью комбинатора дочерних элементов ( > ):

    Продолжение

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

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

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

    Селектор Пример Руководство
    Селектор по типу h1 Селектор по типу
    Универсальный селектор * Универсальный селектор
    Селектор класса .box Селекторы классов
    Селектор ID #unique Селекторы по ID
    Селектор атрибутов a[title] Селекторы атрибутов
    Селектор псевдоклассов p:first-child Псевдоклассы
    Селектор псевдоэлементов p::first-line Псевдоэлементы
    Селектор потомков article p Селектор потомков
    Селектор дочерних элементов article > p Селектор дочерних элементов
    Смежные селекторы h1 + p Смежные селекторы
    Селектор братских элементов h1 ~ p Селектор братских элементов

    В этом модуле

    1. Каскад и наследование
    2. CSS-селекторы
      • Селекторы по типу, классу и идентификатору
      • Селекторы атрибутов
      • Псевдоклассы, псевдоэлементы
      • Комбинации селекторов
    3. Блоки в CSS
    4. Фон и границы
    5. Изменение направления текста
    6. Перекрытие содержимого
    7. Значения свойств CSS
    8. Изменение размеров в CSS
    9. Изображения, формы и прочие медиа-элементы
    10. Стилизация таблиц
    11. Отладка CSS
    12. Организация CSS-кода

    Found a content problem with this page?

    This page was last modified on 26 июл. 2023 г. by MDN contributors.

    Your blueprint for a better internet.

    Источник

    CSS селекторы

    Селектор — это часть CSS-правила, которая сообщает браузеру, к какому элементу (или элементам) веб-страницы будет применён стиль.

    Термин селектор может относиться к простому селектору (simple selector), составному селектору (compound selector), сложному селектору (complex selector) или списку селекторов.

    К простым селекторам относятся:

    • селектор типа
    • универсальный селектор
    • селекторы атрибутов
    • селектор идентификатора
    • селектор класса
    • псевдо-классы

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

    span[title].className p.className1.className2#someId:hover

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

    Список селекторов — это селекторы, перечисленные через запятую.

    Комбинаторы

    Для объединения простых CSS селекторов, используются комбинаторы, которые указывают взаимосвязь между простыми селекторами. Существует несколько различных комбинаторов в CSS2, и один дополнительный в CSS3, когда вы их используете, они меняют характер самого селектора.

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

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

    Псевдо-класс Пример Описание CSS
    :link a:link Выбор всех не посещенных ссылок. 1
    :visited a:visited Выбор всех посещенных ссылок. 1
    :active a:active Выбор активной ссылки. 1
    :hover a:hover Выбор ссылки при наведении курсора мышки. 1
    :focus input:focus Выбор элемента , который находится в фокусе. 2
    :first-child p:first-child Выбор каждого элемента

    , который является первым дочерним элементом своего родителя.

    		 2
    :lang(язык) p:lang(ru) Выбор каждого элемента

    с атрибутом lang , значение которого начинается с «ru».

    		 2
    :first-of-type p:first-of-type Выбор каждого элемента

    , который является первым из элементов

    своего родительского элемента.

    		 3
    :last-of-type p:last-of-type Выбор каждого элемента

    , который является последним из элементов

    своего родительского элемента.

    		 3
    :only-of-type p:only-of-type Выбор каждого элемента

    , который является единственным элементом

    своего родительского элемента.

    		 3
    :only-child p:only-child Выбор каждого элемента

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

    		 3
    :nth-child(n) p:nth-child(2) Выбор каждого элемента

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

    		 3
    :nth-last-child(n) p:nth-last-child(2) Выбор каждого элемента

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

    		 3
    :nth-of-type(n) p:nth-of-type(2) Выбор каждого элемента

    , который является вторым дочерним элементом

    своего родительского элемента.

    		 3
    :nth-last-of-type(n) p:nth-last-of-type(2) Выбор каждого элемента

    , который является вторым дочерним элементом

    своего родительского элемента, считая от последнего дочернего элемента.

    		 3
    :last-child p:last-child Выбор каждого элемента

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

    		 3
    :root :root Выбор корневого элемента в документе. 3
    :empty p:empty Выбор каждого элемента

    , который не содержит дочерних элементов (включая текст).

    		 3
    :target :target Выбор текущего целевого элемента на странице, то есть элемента, к которому был осуществлён переход по ссылке внутри страницы. 3
    :enabled input:enabled Выбор каждого включенного элемента . 3
    :disabled input:disabled Выбор каждого выключенного элемента . 3
    :checked input:checked Выбор элемента , выбранного по умолчанию или пользователем. 3
    :not(селектор) :not(p) Выбор всех элементов, кроме элемента

    .

    		 3

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

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

    Псевдо-элемент Пример Описание CSS
    ::first-letter p::first-letter Выбор первой буквы каждого элемента

    .

    		 1
    ::first-line p::first-line Выбор первой строки каждого элемента

    .

    		 1
    ::before p::before Добавляет элемент с содержимым перед содержимым каждого элемента

    .

    		 2
    ::after p::after Добавляет элемент с содержимым после содержимого каждого элемента

    .

    		 2

    Копирование материалов с данного сайта возможно только с разрешения администрации сайта
    и при указании прямой активной ссылки на источник.
    2011 – 2023 © puzzleweb.ru

    Источник

Оцените статью
© 2024 Программирование