Что такое селекторы в html
Перейти к содержимому

Что такое селекторы в html

  • автор:

Что такое селекторы CSS.

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

+ Текст (вполоть для каждой буквы, каждого абзаца и.т.д.)

+ Таблицы (каждая их строка, столбец или ячейка, и.т.д.)

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

css-gallery

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

В технологии CSS это можно сделать с помощью так называемых селекторов.

Селекторы ( от англ. select — выбирать) — это элементы каскадной таблицы стилей CSS, которые указывают на тот элемент на веб-странице, к которому должны будут применяться стили.

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

В CSS селекторы располагаются самой первой составляющей стиля.

Синтаксис здесь следующий:

селектор

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

По-сути, весь CSS-файл и состоит из таких конструкций, указания селекторов и стилей, которые к ним относятся.

селектор1 < стили >селектор2 < стили >селектор3 < стили >и.т.д.

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

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

CSS/Селекторы

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

body  background-image: url("image.gif"); font-size: 18px; > 

Где body — это селектор, background-image и font-size — это свойства, а url(«image.gif») и 18px — значения.

Виды селекторов [ править ]

  • Селектор тегов, в качестве селектора выступает имя тега, для которого необходимо изменить свойства.
  • Универсальный селектор, который обозначается символом * и применяется для изменения необходимых свойств всех элементов на странице.
  • Классы, применяются для элементов с атрибутом class и необходимым значением.
  • Идентификаторы, применяются для элементов с атрибутом id и необходимым значением. Основное отличие классов от идентификаторов состоит в том, что имена вторых должны быть уникальными, не повторяться, что позволяет их использовать вместе со скриптами (JavaScript).
  • Псевдо-классы предназначены для изменения стиля существующих элементов страницы в зависимости от их динамического состояния, например при работе со ссылками ( :link , :visited , :hover , :active , :focus ). Псевдо-элементы определяют стиль элементов, чётко не определённых в структуре документа ( :first-letter , :first-line ), а также позволяют генерировать и стилизовать несуществующее содержимое ( :before , :after и свойство content ). В CSS3 псевдо-элементы начинаются с двух двоеточий :: ( ::first-letter , ::first-line , ::before , ::after ).
  • Селекторы атрибутов. Позволяют стилизовать элемент не только по значению тега, но и по значению атрибута (a[attr]).
  • Контекстные селекторы. Стилизация элементов, находящихся внутри другого элемента (a b).
  • Дочерние селекторы. Стилизация элемента, расположенного сразу за другим элементом и являющегося его прямым потомком (a > b).
  • Соседние селекторы. Предназначены для стилизации соседних элементов, у которых общий родитель. (a + b)
  • Родственные селекторы. Похожи с соседними селекторами, но с тем различием, что стилизуются все соседние элементы, а не только первый соседний элемент. Впервые появились в CSS3. (a ~ b)

Селектор class [ править ]

Допустим, мы хотим сделать страницу, на которой будет два вида абзацев

, причём оба вида будут постоянно чередоваться и часто повторяться.

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

  Вопросы и ответы  
p.ask  font-style: italic; font-weight: bold; font-family: Arial, sans-serif; font-size: 10px; color: gray; margin-left: 15px; > p.answer  font-family: 'Times New Roman', serif; font-size: 12px; color: black; > 
style> head> body> p class="ask"> вопрос журналиста p> p class="answer"> ответ p> body> html> 

В приведённом примере вопросы журналиста будут отображаться шрифтом Arial серого цвета, полужирным курсивом, размером 10 пунктов с отступом 15 пикселов от левого края страницы. Ответы же будут отображены шрифтом Times New Roman размером 12 пунктов чёрного цвета. Вы можете создавать любое количество классов для любых элементов страницы.

Селектор id [ править ]

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

 html> head> title> Шрифт Courier title> meta charset="utf-8" /> style type="text/css"> 
#onlyThisOne  font-family: Courier; > 
style> head> body> p id="onlyThisOne"> Courier p> body> html> 

Аналогичным образом уникальные идентификаторы могут быть назначены любому количеству любых элементов на странице:

 html> head> title> Форма title> meta charset="utf-8" /> style type="text/css"> 
input#green  color: green; > input#red  color: red; > 
style> head> body> form action="handler.php" method="get"> p> Текст, введенный в это поле, будет отображен зеленым цветом: input type="text" id="green" name="info1" size="20" /> p> p> Текст, введенный в это поле, будет отображен красным цветом: input type="text" id="red" name="info2" size="20" /> p> input type="submit" value="Отправить" /> form> body> html> 

Знаете ли вы селекторы?

Даже если вы почему-то (старый IE?) не пользуетесь ими в CSS, есть много фреймворков для их кросс-браузерного использования CSS3 из JavaScript.

Поэтому эти селекторы необходимо знать.

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

Основных видов селекторов всего несколько:

  • * – любые элементы.
  • div – элементы с таким тегом.
  • #id – элемент с данным id .
  • .class – элементы с таким классом.
  • [name=»value»] – селекторы на атрибут (см. далее).
  • :visited – «псевдоклассы», остальные разные условия на элемент (см. далее).

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

  • .c1.c2 – элементы одновременно с двумя классами c1 и c2
  • a#id.c1.c2:visited – элемент a с данным id , классами c1 и c2 , и псевдоклассом visited

Отношения

В CSS3 предусмотрено четыре вида отношений между элементами.

Самые известные вы наверняка знаете:

  • div p – элементы p , являющиеся потомками div .
  • div > p – только непосредственные потомки

Есть и два более редких:

  • div ~ p – правые соседи: все p на том же уровне вложенности, которые идут после div .
  • div + p – первый правый сосед: p на том же уровне вложенности, который идёт сразу после div (если есть).

Посмотрим их на примере HTML:

CSS Селекторы – CSS и HTML примеры

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

Чтобы узнать, как использовать QuerySelector() и QuerySelectorAll() для запроса элементов DOM, соответствующих селектору CSS, см. статью Как использовать селектор CSS. В этой статье вы узнаете, как эффективно применять селекторы для выбора элементов, которые вы хотите стилизовать.

В этой статье вы узнаете, как эффективно применять селекторы для выбора элементов, которые вы хотите стилизовать. Вы познакомитесь с базовыми селекторами, селекторами-комбинаторами, селекторами атрибутов и псевдоселекторами. Знание CSS-селекторов будет полезно как фронтенд-разработчикам, веб-дизайнерам, так и всем разработчикам, использующим CSS и работающим с (X)HTML-документами.

CSS Селекторы

  • Основные селекторы – Basic Selectors выбирают элементы на основе имени, идентификатора, класса или выбирают все элементы на веб-странице.
  • Селекторы атрибутов – Attribute Selectors выбирают элементы HTML, которые имеют определенный атрибут или атрибут с указанным значением.
  • Селекторы групп – Group Selectors выбирают элементы, сгруппированные в списки, разделенные запятыми.
  • Селекторы комбинаторов – Combinator Selectors выбирают элементы на основе определенного отношения между ними. Элементы могут быть сопоставлены на основе того, как они расположены относительно друг друга в коде разметки или как они вложены в объектную модель документа.
  • Псевдоселекторы – Pseudo Selectors выбирают элементы или часть элемента на основе определенного состояния. Псевдоклассы используются в селекторах CSS, чтобы разрешить форматирование на основе информации, не содержащейся в дереве документа.

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

Основные Селекторы – Basic Selectors

Базовые селекторы CSS выбирают элементы HTML в соответствии с их идентификатором, классом, типом или выбирают все элементы на веб-странице.

Type Селектор или Селектор Элементов CSS

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

CSS

1h1  2 text-align: center; 3 color: DarkRed; 4>

HTML Example

1h1>Aspose.HTML for .NETh1> 2p>Aspose.HTML for .NET is a cross-platform class library that enables your applications to perform a wide range of HTML manipulation tasks.p>

Текст “Визуализированный результат применения селектора элементов CSS.”

ID Селектор

Селектор ID выбирает определенный элемент, используя атрибут id элемента HTML. Элемент будет выбран, если его атрибут id точно соответствует значению, указанному в селекторе ID.

CSS

1#demo  2 background-color: #fcded4; 3 font-size: 24pt; 4>

HTML Example

1p id="demo">This paragraph has a special ID on it!p> 2p>This is just a regular paragraph.p>

Текст “Визуализированный результат применения селектора идентификаторов CSS.”

Class Селектор

Селектор классов сопоставляет HTML-элементы с определенным атрибутом class . Вы можете использовать атрибут class для всех элементов HTML, допустимых в разделе body документа HTML, включая сам элемент . Чтобы выбрать элементы с определенным классом, напишите символ точки (.), а затем имя класса. Например, если мы хотим, чтобы все элементы с классом «main» имели разные цвет фона, цвет текста и размер шрифта, мы должны использовать следующее правило CSS:

CSS

1.main  2 background-color: #d4e9fc; 3 color: red; 4 font-size: 16pt; 5>

HTML Example

1h1>CSS Class Selectorh1> 2p>The class attribute and its value can be used to create a CSS selector that refers to the selected web element.p> 3p class="main">The dot (.) is used to indicate the class attribute to create the CSS Class selector.p>

Текст “Визуализированный результат применения селектора классов CSS”

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

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

CSS

1*  2 text-align: center; 3 color: #0154a2; 4>

HTML Example

1h1>CSS Universal Selectorh1> 2p>The Universal Selector selects all elements. The star symbol will target every single element on the page.p>

Текст “Визуализированный результат применения универсального селектора CSS.”

Селекторы Атрибутов – Attribute Selectors

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

CSS Selector Example Description
[attribute] [translate] Selects all elements with an attribute name of translate.
[attribute=value] [translate=no] Selects all elements with translate=»no» . Represents elements with an attribute name of translate whose value is exactly no.
[attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word flower.
[attribute|=value] [lang|=de] Selects all elements with a lang attribute value equal to “de” or starting with “de-”. It is often used for language subcode matches.
[attribute^=value] a[href^=»#»] Selects every element whose href attribute value is prefixed, begins with «#» (internal links).
[attribute$=value] a[href$=».html»] Selects every element whose href attribute value is suffixed (followed) by value, ends with «.html».
[attribute**=*value] a[href*=“aspose”] Selects every element whose href attribute value contains the “aspose” anywhere in the URL.

Давайте рассмотрим один из селекторов атрибутов CSS в качестве примера:

CSS

1h3[class*="1"]  2 background-color: #b4e8fd; 3>

HTML Example

1h3 class="test-1">CSS Attribute Selectorh3> 2h3>CSS Attribute Selectorh3> 3h3 class="12">CSS Attribute Selectorh3>

Текст “Визуализированный результат применения селектора атрибутов CSS”

Селекторы Групп – Group Selectors

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

CSS

1h1, h2, h3  2 color: #36C; 3 font-family: helvetica; 4>

Пример HTML

1h1>CSS Group Selector (,)h1> 2h2>The defined style will apply to h1, h2 and h3 elements.h2> 3h3>The order of the list doesn't matter.h3>

Текст “Визуализированный результат применения селектора группы CSS”

Селекторы Комбинаторов – Combinator Selectors

Комбинированные селекторы выбирают элементы на основе отношений между ними. В CSS есть четыре разных комбинатора: селектор потомков (пробел), селектор дочерних элементов (>), селектор соседнего родственного элемента (+) и общий селектор родственного элемента (~):

CSS Selector Example Description
element element div p The » » (space) Combinator selects all

elements that are descendants of the first element.

element>element div > span The > Combinator selects all elements where the parent is a element.
element+element div + p Selects the first

element that is placed immediately after elements. The + combinator matches the second element only if it immediately follows the first element.

element~element div ~ p The ~ Combinator selects siblings. This means that it selects every

element that is preceded by a element.

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

CSS

1div > p  2 background-color: #d4e9fc; 3>

Пример HTML

1div> 2 p>CSS Child Selector (>). Paragraph 1 is in a div. 3 section> 4 p>Paragraph 2 is in a div but inside a section element. It is not a direct child of the div element that matches the first selector. Therefore, there is no background color!p> 5 section> 6 p> 7div> 8p>Paragraph 3 is not in the div at all.p>

Текст “Визуализированный результат применения дочернего селектора CSS”

Псевдоселекторы – Pseudo Selectors

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

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

Рассмотрим в качестве примера один из селекторов псевдоэлементов CSS:

CSS

1p::first-letter  2 font-size: 130%; 3 color: red; 4 font-family: arial; 5>

Пример HTML

1p>Pseudo-Element Selectorsp> 2p>A CSS Pseudo-Element is used to style specified parts of an element.p> 3p>For example, p::first-letter can be used to change the first letter of a paragraph.p>

Текст “Визуализированный результат применения псевдоселектора CSS”

Aspose.HTML предлагает бесплатные Веб-приложения HTML, которые представляют собой онлайн-коллекцию конвертеров, слияний, загрузчики, инструменты SEO, генераторы HTML-кода, инструменты URL и многое другое. Приложения работают в любой операционной системе с веб-браузером и не требуют установки дополнительного программного обеспечения. Легко конвертируйте, объединяйте, кодируйте, генерируйте HTML-код, извлекайте данные из Интернета или анализируйте веб-страницы с точки зрения SEO, где бы вы ни находились. Используйте нашу коллекцию веб-приложений HTML, чтобы выполнять повседневные задачи и сделать свой рабочий процесс безупречным!

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *