Содержание

Селекторы типа, класса и ID — Изучение веб-разработки

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

Селектор типа иногда называется селектором имени тега или селектором элемента, поскольку он выбирает тег/элемент HTML в вашем документе. В примере ниже мы использовали селекторы span, em и strong.

Попробуйте добавить CSS-правило, чтобы выбрать элемент <h2> и изменить его цвет на синий.

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

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

Использование универсального селектора для облегчения чтения ваших селекторов

Одно из применений универсального селектора состоит в том, чтобы облегчить чтение селекторов и сделать их более удобопонятными с точки зрения того, что они делают. Например, если мы хотим выбрать элементы-потомки элемента <article>, которые являются первыми дочерними элементами своего родителя, включая дочерние элементы самого <article>, и сделать их шрифт жирным, мы могли бы использовать псевдокласс :first-child, который мы будем изучать в уроке о псевдоклассах и псевдо-элементах, как селектор-потомок вместе с селектором элемента

<article>

article :first-child {
  font-weight: bold;
}

Однако этот селектор можно спутать с article:first-child, который выберет любой элемент <article>, являющийся первым дочерним элементом другого элемента .

Чтобы избежать этой путаницы, мы можем добавить универсальный селектор в псевдокласс :first-child , чтобы было очевидно, что делает селектор. Он выбирает любой элемент, который является первым дочерним элементом элемента <article> или первым дочерним элементом любого потомка элемента

<article>:

article *:first-child {
  font-weight: bold;
} 

Хотя оба делают одно и то же, удобочитаемость значительно улучшилась.

Селектор класса начинается с символа точки (.). Он выберет в документе всё, к чему применён этот класс. В живом примере ниже мы создали класс с именем .highlight, и применили его к нескольким местам в документе. Все элементы, к которым применён класс, подсвечиваются.

Нацеливание классов на отдельные элементы

Вы можете создать селектор, нацеленный на конкретные элементы, к которым применён класс. В следующем примере мы подсветим <span> с классом highlight иначе, чем заголовок

<h2> с классом highlight. Мы сделаем это, используя селектор типа для элемента, на который нацелены, с классом, добавленным с помощью точки, без пробела между ними.

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

Нацеливание на элемент, к которому применено более одного класса

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

В примере ниже у нас есть <div>, содержащий примечание. Серая граница применяется когда блок имеет класс notebox. Если у блока есть также класс warning или danger, мы меняем border-color (en-US).

Мы можем указать браузеру, что мы хотим подобрать только такой элемент, к которому применены два класса, сцепив их вместе без пробелов между ними. Вы увидите, что к последнему <div> не применён ни один стиль, так как он имеет только класс danger; ему нужен ещё и класс notebox, чтобы получить какую-нибудь стилизацию.

Селектор ID начинается с #, а не с точки, но используется так же, как и селектор класса. Однако ID может быть использован единожды на странице, и к элементу может быть применён только один

id. Можно выбрать элемент, которому присвоен  id, а также вы можете предварить ID селектором типа для нацеливания на элемент, имеющий соответствующее сочетание элемента и ID. Вы можете увидеть оба варианта использования в следующем примере:

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

Примечание: Как мы знаем из урока по специфичности, ID имеет высокую специфичность. Он будет брать верх над большинством других селекторов. В большинстве случаев предпочтительнее добавить элементу класс, чем ID. Однако, если использование ID это единственный способ нацелиться на элемент — возможно, потому вы не имеете доступа к разметке и, следовательно, возможности её редактировать — это будет работать.

CSS: Селекторы ID и CLASS

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


/*Задаём отступ первой строки для всех абзацев*/
p {text-indent: 25px;}

/*Изменяем цвет всех заголовков первого уровня на зелёный*/
h2 {color: green;}

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

Но что если нам не нужно изменять цвет для всех заголовков <h2>, а только у одного или у двух? CSS предоставляет нам такую возможность. С помощью селекторов id и class, мы можем применять стиль к элементам не зависимо от их имён.

Селектор id

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

Для использования селектора id, нужно создать идентификатор (id), придумав ему уникальное имя, и прописать его в атрибуте id элемента, к которому будет применяться стиль. В CSS коде селектор id начинается с символа # сразу после которого идет имя идентификатора.

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

Пример работы селектора id:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      #para1 {
        text-align: center;
        color: red;
      } 
    </style>
  </head>

  <body>
    <p>Добро пожаловать!</p>
    <p>К этому абзацу не будет применен стиль.</p>
  </body>
</html>
Попробовать »

Примечание: не давайте идентификаторам имена, начинающиеся с цифр, они не будут работать в браузере Mozilla Firefox.

Селектор class

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

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

Правила для имен классов:

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

CSS код для классов ничем не отличается от CSS кода для других селекторов. После имени класса идет блок объявлений, содержащий все необходимые свойства:

.menu {
  color: #33CCFF;
  font-family: sans-serif;
}

Если атрибут class, с одним и тем же именем, добавлен к нескольких разным тегам, а вам нужно чтобы стиль применялся только к определенным тегам, то в селекторе перед обозначением класса нужно указать тег, к которому должен быть применён стиль:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.center { text-align: center; }
    </style>
  </head>

  <body>
    <h2>Стиль не будет применен.</h2>
    <p>Абзац будет выровнен по центру.</p> 
  </body>
</html>
Попробовать »

Как вы уже заметили из примера, писать точку перед именем класса в HTML коде (в значении атрибута class) не нужно. Она требуется только в обозначении селектора в таблице стилей.

С этой темой смотрят:

Руководство Основные CSS Selectors

1- Что такое CSS Selector?

CSS Selector используется для поиска (или выбора) элементов в HTML докумене, чтобы применить к ним стиль (style).

Простой пример:


/** Select all elements with class contains abc */

.abc  

/** Select element with ID = abc */

#abc

CSS Selectors разделен на 3 следующие виды:

Basic Selectors

Базовые Selector помогают вам выбрать элементы, основываясь на его Name, ID, Class или Attribute.

Базовые Selector будут упомянуты в данной статье.

Combining selectors

Выбрать элементы, основываясь на отношении между ними.

Combinator Syntax Example
Descendant combinator A B div span
div .item
Child combinator A > B ul > li
General sibling combinator A ~ B p ~ span
Adjacent sibling combinator A + B h3 + p
Column combinator A || B col || td

Pseudo selectors

Pseudo Syntax Example
Pseudo classes A:B a:visited
Pseudo elements A::B p::first-line

Universal selector (Универсальный селектор): Выбирает все элементы или все элементы namespace (пространство имен).

Синтаксис:

SelectorОписание
*Выбрать все элементы.
*|*Выбрать все элементы.
ns|*Выбрать все элементы в пространстве имен ns.
|*Выбрать все элементы необъявленные в пространстве имен.

Например выбрать все элементы и настроить для них границы зеленого цвета.

universal-selector-example1.html


<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Universal Selector: *</title>
      <style>
         *  {
           border: 1px solid green;
           margin: 5px;
         }
      </style>
   </head>
   <body>
     <h2>I am h2 element</h2>
     <div>I am div element</div>
     <p>I am P element</div>
   </body>
</html>

CSS Type Selector помогает вам найти элементы по имени.

Например, выбрать все элементы <div>:

Например, выбрать все элементы​​​​​​​ <span>:

type-selector-example1.css


span  {
   background-color: skyblue;
}

type-selector-example1.html


<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Universal Selector: ns|*</title>
      <link rel="stylesheet" type="text/css" href="type-selector-example1.css" />
   </head>
   <body>
     <span>I am span element</span>
     <p>I am P element</p>
     <span>I am span element</span>
   </body>
</html>

Если CSS Selector имеют одинаковое правило, можно их написать вкратце, CSS Selector будут разделены запятой и использовать одно и то же правило.

type-selector-example2.css


/** Select h2 or h3 */
h2, h3  {
   color: blue;
}

type-selector-example2.html


<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Type Selector</title>
      <link rel="stylesheet" type="text/css" href="type-selector-example2.css" />
   </head>
   <body>
     <h2>I am h2 element</h2>
     <h3>I am h3 element</h3>
     <h4>I am h4 element</h4>
   </body>
</html>

CSS Class Selector выбирает элементы, основываясь на значении атрибута (attribute) class.

Например, выбрать все элементы с class = «txt-green» ​​​​​​​или включая слово «txt-green».

class-selector-example1.css


.txt-green  {
   color: green;
}
.bg-yellow {
   background-color: yellow;
}

class-selector-example1.html


<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Class Selector</title>
      <link rel="stylesheet" type="text/css" href="class-selector-example1.css" />
   </head>
   <body>
     <h2 class ="txt-green">I am h2 with class = 'txt-green'</h2>
     <p>I am P element</p>
     <h3>I am h3 with class = 'txt-green bg-yellow'</h3>
   </body>
</html>

Пример:

class-selector-example2.css


/* <p> with class 'txt-green' or includes 'text-green' */
p.txt-green  {
   color: green;
}
.bg-yellow {
   background-color: yellow;
}
/* <div> with class inculudes both 'text-green' and 'bg-yellow' */
div.txt-green.bg-yellow  {
    color: green;
    font-style: italic;
}

class-selector-example2.html


<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Class Selector</title>
      <link rel="stylesheet" type="text/css" href="class-selector-example2.css" />
   </head>
   <body>
     <h2 class ="txt-green">I am h2 with class = 'txt-green'</h2>
     <p class ="txt-green">I am P element with</p>
     <div>I am DIV with class = 'txt-green bg-yellow'</div>
     <br/>
     <span>I am SPAN with class = 'txt-green bg-yellow'</span>
   </body>
</html>

CSS ID Selector помогает вам выбрать элементы основываясь на значении атрибута (attribute) ID, значение атрибута ID должно полностью совпадать со значением, данным Selector. Примечание: CSS ID Selector «не различает прописные и строчные буквы» (Case insensitive)

id-selector-example.css


#demo  {
   color: blue;
   font-size: 30px;
}

id-selector-example.html


<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>ID Selector</title>
      <link rel="stylesheet" type="text/css" href="id-selector-example.css" />
   </head>
   <body>
     <h2 id = "demo">Demo</h2>
     <span>I am span element</span>
     <p>I am P element</p>
   </body>
</html>

6- CSS Attribute Selector

CSS Attribute Selector помогает вам выбрать элементы, основываясь на атрибуте или значении выданного атрибута.

Классы и ID CSS: Что использовать?

В этой статье мы кратко рассмотрим, как применяются CSS классы и ID, и постараемся с помощью нескольких простых примеров объяснить, как их использовать.

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

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

Селектор id используется для выбора одного HTML-элемента с уникальным значением атрибута id. В следующем примере приведен раздел <div> со значением атрибута id header:

<div>
<font>
<font>Это заголовок нашей веб-страницы.
</font>
</font>
</div>

В файле CSS можно применить стили к этому элементу div:

#header { width: 100%; height: 80px; background: blue }

Обратите внимание на использование # (хэша) перед именем идентификатора.

Селектор класса используется для выбора одного или нескольких HTML-элементов с одинаковым значением атрибута CSS класса class. В следующем примере приведен код трех элементов <р> со значением атрибута class content:

<p>
<font>
<font>Это наш первый пункт.</font>
</font>
</p>
<p>
<font>
<font>Это наш второй абзац.</font>
</font>
</p>
<p>
<font>
<font>Это наш третий абзац.</font>
</font>
</p>

В файле CSS можно применить стили к этим абзацам следующим образом:

.content { margin: 20px 0; line-height: 24px; font-size: 15px }

Обратите внимание на использование точки перед именем класса.

Рассмотрим, в чем состоит разница между CSS классами и идентификаторами. В приведенных выше примерах мы использовали селектор ID (#header) для одного элемента, а селектор класса (.content) — для нескольких.

Это потому, что значение идентификатора может быть присвоено только одному элементу HTML, и несколько элементов на одной странице не могут иметь одинаковый ID. Например, на странице может присутствовать только один элемент с идентификатором #header или один элемент с идентификатором #footer. Значение класса может быть присвоено одному или нескольким HTML-элементам. Например, нескольким абзацам с классом .content.

Следующий пример поможет лучше понять разницу между классами и ID CSS и то, как правильно их использовать:

<div>
<a>
<font>
<font>Ссылка 1 </font>
</font></a>
 <a>
<font>
<font>Ссылка 2 </font>
</font>
</a>
 <a>
<font>
<font>Ссылка 3 </font>
</font>
</a>
 <a>
<font>
<font>Ссылка 4</font>
</font>
</a>
</div> 
<div>
<p>
<font>
<font>Это наш первый пункт.</font>
</font><
/p>
<p>&nbsp;</p>
<p>
<font>
<font>Это наш второй абзац.</font>
</font>
</p>
<p>&nbsp;</p>
<p>
<font>
<font>Это наш третий абзац.</font>
</font>
</p>
</div>

В приведенном выше HTML коде мы присвоили контейнеру <div> ID (#container), так как у нас на странице есть только один контейнер.

В нем содержатся разделы меню (#menu) и контента (#content). Как и в случае контейнера, у нас на странице есть только одно меню и один раздел контента. Внутри меню у нас есть четыре ссылки <a>, мы присвоили каждой из них CSS класс (.link). Аналогичным образом мы присвоили класс (.text) каждому абзацу в разделе контента.

Назначим стили для этих элементов:

#container { width: 1080px; margin: 0 auto; background: #eee }
 
#menu { height: 90px; background: #ddd }
.link { color: #000; text-decoration: none }
 
#content { padding: 20px }
.text { font-size: 15px }

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

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

<div>
<font>
<font>...</font>
</font>
</div> 
<div>
<font>
<font>...</font>
</font></div>

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

<p>
<font>
<font>Этот пункт не имеет границ.</font>
</font>
</p> 
<p>
<font>
<font>Этот пункт имеет границы.</font>
</font>
</p>

Обратите внимание на пустое пространство между двумя именами классов в атрибуте class второго абзаца. Пример CSS для приведенного выше HTML кода:

.content { margin: 10px; font-size: 15px; color: blue }
.bordered { border: 2px solid #222 }

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

На этом мы завершаем сравнение классов и ID CSS. Мы надеемся, что этот материал окажется полезным для вас.

Вадим Дворниковавтор-переводчик статьи «CSS Class vs ID Which One to Use»

Определение CSS селекторов | База знаний

В этой статье подробно разберем, как найти CSS селекторы, которые необходимы для сбора данных с сайта

Важно! Не переживайте, если ранее не были знакомы с html и CSS, здесь не потребуется специальных знаний в программировании 😉

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

Поиск нужного элемента

Для начала откройте html код страницы вашего сайта. Сделать это можно кликнув правой кнопкой мыши и выбрав «Показать код элемента»/Inspect (здесь и далее рассматривается работа в браузере Chrome). 

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

Следующий этап работы — определить тег, который нам нужен. Сделать это можно несколькими способами:

  • кликнуть на конкретную область, нажать на правую кнопку мыши и еще раз выбрать «Показать код элемента»/Inspect;
  • переключиться на выбор элемента на странице из консоли, нажав на соответствующую кнопку в консоли браузера;

  • через поиск найти тег прямо в html коде. Для этого кликните на любой тег, нажмите сочетание клавиш Ctrl + F и в появившейся строке поиска введите любой текст с сайта. Браузер сам подсветит элемент и рядом напишет количество совпадений на странице. В нашем примере видно, что «записаться» повторяется на странице дважды. При нажатии Enter в строке поиска, браузер переключает к следующему элементу на странице (этот момент поможет вам проверять уникальность селектора на странице либо уточнять, все ли найденные элементы соответствуют вашим задачам, когда их должно быть несколько).

Основные понятия в html коде

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

Тег — это элемент, который может быть состоять из начального и конечного, и содержать внутри себя текст (span в примере — название тега), а может быть одиночным, например <br> (перенос текста на новую строку). 

Атрибут тега — дополнительные параметры тега, которые влияют на содержимое тега, например текст. Например,
— здесь  style=»font-size: 200%; text-align: center;» является атрибутом и в нашем примере он сделает размер текста Записаться в два раза крупнее и разместит его по центру.
У одного тега может быть несколько атрибутов, которые будут разделены пробелами, например, так:

здесь два атрибута у одного тега — class и style.

Значение атрибута — атрибут тега состоит из двух элементов: названия и значения.
Цифрой 1 отмечены названия атрибутов, цифрой 2 — их значения. Значений, как и самих атрибутов в теге, может быть несколько, разделяются они также пробелом.

Расположение тегов — в html коде все теги должны располагаться по четким правилам, как матрешки, один в другом либо рядом. У всех тегов есть родители (теги, внутри которых они находятся) и у многих дети. Например, тег <strong></strong> ребенок и тега <h3></h3>, и тега <div></div>, а они соответственно его родители:

Правила обозначения CSS селекторов

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

Название тега — достаточно просто указать span, div, img, h3  в месте, где нужно прописать селектор, и такой селектор будет учитывать все теги с таким названием на странице. Обычно этого хватает для записи названия страницы, так как обычно оно присутствует в теге h2, который не повторяется. Например, так будет выглядеть настройка записи в свойство события «Посещение страницы» названия страницы:

Атрибуты class и id — это уникальные в нашем случае атрибуты, которые обознаются не так, как все остальные. Пример:

Здесь селектор  class мы запишем как .text или .wrapper2, то есть просто добавим точку перед значением. Если мы хотим указать, что нам нужен тег, где в обязательном порядке присутствуют оба значения, то пропишем так .text.wrapper2 (без пробела).

Значение id должно являться уникальным по правилам html и иметь только одно значение внутри этого тега. Про примеру оно будет обозначаться так #section24.

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

Другие атрибуты — все остальные атрибуты записываются по единому правило: название тега[атрибут и его значение]. Например, укажем CSS селектор для тега с конкретной картинкой, используя атрибут scr (ссылку на картинку):

img[src=»//s.filesonload.ru/img/shadowbottom/1.png»]

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

Сначала пробуем ближайшего родителя, то есть тег <span>. Селектор будет выглядеть так: span strong, то есть нам достаточно написать названия тегов в нужном порядке и такой селектор выберет все теги <strong>, которые находятся в теге <span>. Аналогично будет выглядеть и с родителей <h3>: h3 strong

Мы можем задать и более четкое условие, что нам нужно все теги <strong>, которые находятся непосредственно в теге <span>. Для этого используем символ >: span > strong

Можно использовать цепочку из названий тегов и их атрибутов, которые в конечном итоге укажут на нужный тег: h3.font-header span span strong.

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

В этом примере все просто: мы имеем ввиду 2 тега, клик на которые будут записываться в хронологию пользователя, как отдельное событие. Первый селектор div.button input[type=»submit»] обозначает, что нам нужны все теги <input>, в которых есть атрибут type=»submit» и они должны являться детьми тега <div>, в котором есть атрибут. В упрощенном варианте это будет выглядеть так в html (на самом сайте, конечно, будет больше всего вокруг): 

<div class=»button»>
<input type=»submit»></input>
</div>

Тут же, через запятую, прописан еще один селектор: все теги <button> с атрибутом.

Проверка уникальности CSS селектора

Уникальность CSS селектора для нас очень важна. Если селектор прописан неверно и он не является уникальным, то сбор данных будет не точным, а значит — бесполезным. 

Проверить уникальность можно прямо в браузере через поиск в панеле Elements. Нажмите сочетание клавиш Ctrl + F, и введите в строке поиска найденный вами ранее CSS селектор. Браузер сам подсветит тег, путь к которому вы указали и напишет количество таких совпадений на странице.

В большинстве случаев, совпадение должно быть только одно (будет написано — 1/1). Иногда требуется, чтобы совпадений было несколько, но все они указывали на нужные вам теги, например, свойство «Товары в корзине» подтягивает названия товаров из списка товаров в самой корзине. При настройке такого свойства количество совпадений по селекторам должно равняться реальному количеству товаров в корзине на данный момент.

Как проверить, правильно вы настроили сбор данных в Carrot quest, можно посмотреть в этой статье. При любых сложностях — пишите нам в чат, будем рады помочь.

CSS-селекторов


Селектор CSS выбирает элементы HTML, которые вы хочу стиль.


Селекторы CSS

Селекторы CSS

используются для «поиска» (или выбора) HTML-элементов, которые вы хочу стиль.

Мы можем разделить селекторы CSS на пять категорий:

На этой странице объясняются самые основные селекторы CSS.


Селектор элементов CSS

Селектор элементов выбирает элементы HTML на основе имени элемента.

Пример

Здесь все элементы

на странице будут по центру, красный цвет текста:

п {
выравнивание текста: по центру;
цвет: красный;
}

Попробуй сам »

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

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

Идентификатор элемента уникален на странице, поэтому селектор идентификатора использовал к выберите один уникальный элемент!

Чтобы выбрать элемент с определенным идентификатором, введите символ решетки (#), за которым следует идентификатор элемента.

Пример

Правило CSS ниже будет применено к элементу HTML с:

# para1 {
выравнивание текста: по центру;
цвет: красный;
}

Попробуй сам »

Примечание: Имя идентификатора не может начинаться с цифры!



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

Селектор класса выбирает элементы HTML с определенным атрибутом класса.

Чтобы выбрать элементы с определенным классом, введите символ точки (.), А затем название класса.

Пример

В этом примере все элементы HTML будут красными и выровнены по центру:

.center {
выравнивание текста: по центру;
цвет: красный;
}

Попробуй сам »

Вы также можете указать, что класс должен воздействовать только на определенные элементы HTML.

Пример

В этом примере только элементы

с красный и по центру:

p.center {
выравнивание текста: по центру;
цвет: красный;
}

Попробуй сам »

HTML-элементов также может относиться к нескольким классам.

Пример

В этом примере элемент

будет оформлен в соответствии с и на:

Этот абзац относится к двум классам.

Попробуй сам »

Примечание: Имя класса не может начинаться с числа!


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

Универсальный селектор (*) выбирает весь HTML элементы на странице.

Пример

Правило CSS ниже повлияет на каждый элемент HTML на странице:

* {
выравнивание текста: по центру;
цвет: синий;
}

Попробуй сам »

Селектор группировки CSS

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

Посмотрите на следующий код CSS (элементы h2, h3 и p имеют одинаковые определения стилей):

h2 {
выравнивание текста: центр;
цвет: красный;
}

h3 {
выравнивание текста: центр;
цвет: красный;
}

п. {
выравнивание текста: по центру;
цвет: красный;
}

Лучше сгруппировать селекторы, чтобы минимизировать код.

Чтобы сгруппировать селекторы, разделите каждый селектор запятой.

Пример

В этом примере мы сгруппировали селекторы из приведенного выше кода:

h2, h3, p {
выравнивание текста: центр;
цвет: красный;
}

Попробуй сам »

Все простые селекторы CSS

с.
Селектор Пример Описание примера
# id # имя Выбирает элемент с помощью
. класс .intro Выбирает все элементы с помощью
класс элемента стр. Intro Выбирает только элементы

с

* * Выбирает все элементы
элемент п. Выбирает все элементы

элемент, элемент, .. див, Выбирает все элементы
и все элементы



Справочник по селекторам CSS

с.
Селектор Пример Описание примера
. класс .intro Выбирает все элементы с помощью
.class1.class2 .name1.name2 Выбирает все элементы, для которых установлено как name1 , так и name2 в пределах своего атрибута класса
.класс1 .класс2 .name1 .name2 Выбирает все элементы с name2 , которые являются потомками элемент с именем 1
# id # имя Выбирает элемент с помощью
* * Выбирает все элементы
элемент п. Выбирает все элементы

элемент.класс стр. Intro Выбирает все элементы

с помощью

элемент, элемент див, Выбирает все элементы
и все элементы

элемент элемент div p Выбирает все элементы

внутри элементов

элемент > элемент div> p Выбирает все элементы

, у которых родительский элемент

элемент + элемент div + p Выбирает первый элемент

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

элемент1 ~ элемент2 пол Выбирает каждый элемент
    , которому предшествует элемент

[ атрибут ] [цель] Выбирает все элементы с целевым атрибутом
[ атрибут = значение ] [target = _blank] Выбирает все элементы с target = «_ blank»
[ атрибут ~ = значение ] [название ~ = цветок] Выбирает все элементы с атрибутом title, содержащим слово «цветок». = «https»] Выбирает каждый элемент , значение атрибута href которого начинается с https.
[ атрибут $ = значение ] а [href $ = «.pdf »] Выбирает каждый элемент , значение атрибута href которого заканчивается на «.pdf»
[ атрибут * = значение ] a [href * = «w3schools»] Выбирает каждый элемент , значение атрибута href которого содержит подстроку «w3schools».
: активный a: активный Выбирает активную ссылку
:: после р :: после Вставить что-нибудь после содержимого каждого элемента

:: до р :: до Вставить что-нибудь перед содержимым каждого элемента

: проверен ввод: проверен Выбирает каждый отмеченный элемент
: по умолчанию ввод: по умолчанию Выбирает элемент по умолчанию
: отключено вход: отключен Выбирает каждый отключенный элемент
: пусто п: пусто Выбирает каждый элемент

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

: включено вход: включен Выбирает каждый активированный элемент
: первенец р: первенец Выбирает каждый элемент

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

:: первая буква п :: первая буква Выбирает первую букву каждого элемента

:: первая линия п :: первая линия Выбирает первую строку каждого элемента

: первый в своем роде п: первый тип Выбирает каждый элемент

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

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

: фокус ввод: фокус Выбирает элемент ввода, имеющий фокус
: полноэкранный : полноэкранный режим Выбирает элемент, который находится в полноэкранном режиме
: парение a: парение Выбирает ссылки при наведении указателя мыши на
: в пределах ввод: в пределах Выбирает элементы ввода со значением в указанном диапазоне
: неопределенный ввод: неопределенный Выбирает элементы ввода, которые находятся в неопределенном состоянии
: недопустимый ввод: недопустимый Выбирает все входные элементы с недопустимым значением
: язык ( язык ) p: lang (it) Выбирает каждый элемент

с атрибутом lang, равным «it» (итальянский)

: последний ребенок p: последний ребенок Выбирает каждый элемент

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

: последний тип п: последний тип Выбирает каждый элемент

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

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

: ссылка а: ссылка Выбирает все непосещенные ссылки
:: маркер :: маркер Выбирает маркеры элементов списка
: нет ( селектор ) : нет (p) Выбирает каждый элемент, который не является элементом

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

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

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

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

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

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

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

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

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

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

: только тип п: одинарный Выбирает каждый элемент

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

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

: только ребенок p: только детский Выбирает каждый элемент

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

: опционально ввод: опционально Выбирает элементы ввода без атрибута «обязательный»
: вне допустимого диапазона вход: вне допустимого диапазона Выбирает элементы ввода со значением вне указанного диапазона
:: заполнитель input :: заполнитель Выбирает элементы ввода с указанным атрибутом «заполнитель»
: только для чтения ввод: только для чтения Выбирает элементы ввода с указанным атрибутом «только для чтения»
: чтение-запись ввод: чтение-запись Выбирает элементы ввода с НЕ указанным атрибутом «только для чтения»
: требуется ввод: требуется Выбирает элементы ввода с указанным атрибутом «обязательный»
: корень : корень Выбирает корневой элемент документа
:: выбор :: выбор Выбирает часть элемента, выбранную пользователем
: цель # новости: target Выбирает текущий активный элемент #news (щелкнул URL-адрес, содержащий это имя привязки)
: действует ввод: действителен Выбирает все входные элементы с допустимым значением
: посетил a: посетил Выбирает все посещенные ссылки

Селекторы типа, класса и идентификатора — Изучение веб-разработки

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

Селектор типа иногда называют селектором имени тега или селектором элемента , потому что он выбирает тег / элемент HTML в вашем документе. В приведенном ниже примере мы использовали селекторы span , em и strong .

Попробуйте добавить правило CSS, чтобы выбрать элемент

и изменить его цвет на синий.

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

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

Использование универсального селектора для облегчения чтения ваших селекторов

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

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

  артикул: first-child {
  font-weight: жирный;
}
  

Однако этот селектор можно спутать с article: first-child , который выберет любой элемент

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

Чтобы избежать этой путаницы, мы можем добавить универсальный селектор к псевдоклассу : first-child , чтобы было более очевидно, что делает селектор.Он выбирает любой элемент , который является первым дочерним элементом элемента

или первым дочерним элементом любого дочернего элемента
:

  артикул *: first-child {
  font-weight: жирный;
}
  

Хотя оба делают одно и то же, удобочитаемость значительно улучшена.

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

Нацеливание классов на определенные элементы

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

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

Этот подход уменьшает объем правила. Правило будет применяться только к этому конкретному элементу и комбинации классов. Вам нужно будет добавить еще один селектор, если вы решили, что правило должно применяться и к другим элементам.

Назначьте элемент, если к нему применено несколько классов.

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

В приведенном ниже примере у нас есть

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

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

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

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

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

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

Все, что вам нужно знать об идентификаторе в CSS

HTML-элементы могут быть определены по типу, классу, атрибуту, псевдосостоянию или имени идентификатора. То, как вы их определяете, повлияет на то, как вы настраиваете их с помощью селекторов CSS.

Например, если вы хотите внести серьезные изменения на свой сайт, вы можете использовать селектор типа. Допустим, вы хотите стилизовать каждый элемент span на своем сайте.Затем вы использовали бы селектор типа span {style properties} .

Чтобы внести более подробные изменения, вам понадобится более конкретный селектор. Наиболее конкретным является селектор идентификатора. Давайте подробнее рассмотрим этот тип селектора ниже.

Селектор CSS ID

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

Вот синтаксис селектора идентификатора в CSS:

  
#idname {style properties}

Есть несколько правил, которым вы должны следовать, чтобы правильно использовать селектор CSS ID. Прежде чем мы рассмотрим эти правила ниже, позвольте мне сделать важное замечание по поводу приведенных ниже примеров.

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

Как использовать ID в CSS

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

Допустим, у меня на сайте несколько h3, и каждый знаменует начало новой главы.Затем я мог бы дать каждому h3 имя ID.

Следующий HTML-код правильный:

  

Глава 1


Глава 2


Глава 3


Глава 4


Это неверно:

  

Глава 1


Глава 2


Глава 3


Глава 4


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

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

Следующий HTML-код правильный:

  

Глава 1


Глава 2


Глава 3


Глава 4


Это неверно:

  

Глава 1


Глава 2


Глава 3


Глава 4


Следующий CSS изменит размер шрифта каждого h3:

  
# C1 {
размер шрифта: 18 пикселей;
}
# C2 {
размер шрифта: 20 пикселей;
}
# C3 {
font-size: 22px;
}
# C4 {
font-size: 24px;
}

Вот результат:

См. Ручку mdWVXKM Кристины Перриконе (@hubspot) на CodePen.

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

Используя HTML из приведенного выше примера, следующий CSS будет правильным.

  
# C1 {
размер шрифта: 18 пикселей;
}
# C2 {
размер шрифта: 20 пикселей;
}
# C3 {
font-size: 22px;
}
# C4 {
font-size: 24px;
}

Это было бы неверно:

  
# c1 {
font-size: 18px;
}
# c2 {
размер шрифта: 20 пикселей;
}
# c3 {
font-size: 22px;
}
# c4 {
font-size: 24px;
}

Если бы я использовал этот CSS со строчной буквой «c», селекторы CSS ID и их соответствующие правила CSS не применялись бы.Вместо этого будет отображаться стиль h3 по умолчанию в Bootstrap, как показано ниже.

См. Pen How NOT to use CSS ID [Example] Кристины Перриконе (@hubspot) на CodePen.

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

Идентификатор изображения CSS

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

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

Для начала вы должны добавить к изображению атрибут ID. Этот атрибут ID может появляться где угодно внутри элемента изображения: перед атрибутом img src, после атрибута src, но перед атрибутом alt, после обоих атрибутов img src и alt.

В приведенном ниже примере я помещу атрибут ID «round» перед атрибутами src и alt во втором элементе изображения.Затем я использую селектор ID, чтобы сделать это изображение круглым и непрозрачным на 70%.

Вот HTML:

  
крошечный щенок
 крошечный щенок
 наименее крошечный, но все же крошечный щенок

Вот код CSS:

  
# вокруг {
border-radius: 50%;
непрозрачность: 0.7;
}

Вот результат:

См. Идентификатор изображения Pen CSS Image ID Кристины Перриконе (@hubspot) на CodePen.

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

CSS-класс против ID

В CSS класс используется для группировки более чем одного элемента, тогда как идентификатор используется для идентификации одного элемента. Поэтому селектор класса используется для стилизации нескольких элементов HTML одного класса, а селектор идентификатора используется для стилизации одного элемента HTML.Вы можете распознать селектор класса по точке («.»), Которую он содержит, а селектор идентификатора — по символу решетки («#»)

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

При сравнении селекторов классов и селекторов ID селекторы ID имеют более высокую специфичность и, следовательно, более эффективны.(Фактически, селекторы идентификаторов настолько мощны, что только свойство! Important может переопределять их в CSS.) Это означает, что если элемент нацелен селектором идентификатора и селектором класса, стиль CSS селектора идентификатора будет применен к элемент поверх стиля селектора класса.

Давайте посмотрим на пример, демонстрирующий это правило ниже.

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

  

Я хочу, чтобы элементы кнопок на моем сайте были синего цвета Calypso. В этом случае я бы использовал селектор классов, чтобы определить все элементы в классе кнопки, чтобы они имели синий цвет фона (шестнадцатеричный код цвета # 00A4BD) и белый цвет шрифта (#FFFFFF).

Вот HTML:

  


Вот код CSS:

  
.btn {
цвет фона: # 00A4BD;
цвет: #FFFFFF;
}

Вот результат:

См. Pen qBrbxwa Кристины Перриконе (@hubspot) на CodePen.

Но, допустим, я хочу, чтобы кнопка подписки на моей домашней странице была еще более привлекательной. Затем я мог бы использовать селектор идентификатора, чтобы определить одну кнопку с идентификатором «домашняя страница» и настроить ее так, чтобы она имела цвет фона фуксии и черный цвет шрифта (# 000000). Все кнопки без идентификатора «домашняя страница» по-прежнему будут следовать правилу CSS селектора классов (синий цвет фона и белый цвет шрифта).

Вот HTML:

  


Вот код CSS:

  
#homepage {
background-color: # FF00FF;
цвет: # 000000;
}
.btn {
цвет фона: # 00A4BD;
цвет: #FFFFFF;
}

Вот результат:

См. CSS-класс Pen против ID [пример] Кристины Перриконе (@hubspot) на CodePen.

Внесите подробные изменения с помощью селектора идентификаторов CSS

Селекторы

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

Примечание редактора: этот пост был первоначально опубликован в мае 2020 года и был обновлен для полноты.

CSS | Селектор #id — GeeksforGeeks

Селектор #id используется для установки стиля данного идентификатора.Атрибут id — это уникальный идентификатор в HTML-документе. Селектор id используется с символом #.

Синтаксис:

 #id {
    // свойство CSS
} 

Пример:

< html >

1

0 9079 заголовок > Селектор #id заголовок >

< стиль > 9909 1 цвет: зеленый;

выравнивание текста: по центру;

}

# gfg2 {

выравнивание текста: по центру;

}

стиль >

головка 1 1 9 1 9 >

< h2 id = "gfg1" 3> GeeksforGeeks1 h3 id = "gfg2" > #id selector h3 >

body 4 4 4 html >

Выход:

Поддерживаемые браузеры: Браузеры, поддерживаемые селектором идентификаторов , перечислены ниже:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera

CSS Selector - javatpoint

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

В CSS есть несколько различных типов селекторов.

  1. Селектор элементов CSS
  2. Селектор идентификаторов CSS
  3. Селектор классов CSS
  4. Универсальный селектор CSS
  5. Селектор групп CSS

1) Селектор элементов CSS

Селектор элемента выбирает элемент HTML по имени.

<стиль> п{ выравнивание текста: центр; цвет синий; }

Этот стиль будет применяться к каждому абзацу.

Я тоже!

И я!

Проверить это сейчас

Выход:

Этот стиль будет применен к каждому абзацу.

Я тоже!

И я!


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

Селектор id выбирает атрибут id элемента HTML для выбора определенного элемента. Идентификатор всегда уникален на странице, поэтому он выбирается для выбора одного уникального элемента.

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

Рассмотрим пример с идентификатором para1.

<стиль> # para1 { выравнивание текста: центр; цвет синий; }

Здравствуйте, Javatpoint.com

Этот абзац не будет изменен.

Проверить это сейчас

Выход:

Привет Javatpoint.com

Этот абзац не будет изменен.


3) Селектор классов CSS

Селектор класса выбирает элементы HTML с определенным атрибутом класса.Используется с точкой. (символ точки), за которым следует имя класса.

Примечание. Имя класса не должно начинаться с числа.

Рассмотрим пример с классом «центр».

<стиль> .center { выравнивание текста: центр; цвет синий; }

Этот заголовок выделен синим цветом и выровнен по центру.

Этот абзац синий и выровнен по центру.

Проверить это сейчас

Выход:

Этот заголовок выделен синим цветом и выровнен по центру.

Этот абзац синий и выровнен по центру.


Селектор классов CSS для определенного элемента

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

Давайте посмотрим на примере.

<стиль> p.center { выравнивание текста: центр; цвет синий; }

Этот заголовок не изменяется

Этот абзац синий и выровнен по центру.

Проверить это сейчас

Выход:

На данную товарную позицию не влияет

Этот абзац синий и выровнен по центру.


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

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

<стиль> * { цвет: зеленый; размер шрифта: 20 пикселей; }

Это заголовок

Этот стиль будет применяться к каждому абзацу.

Я тоже!

И я!

Проверить это сейчас

Выход:

Это товарная позиция

Этот стиль будет применен к каждому абзацу.

Я тоже!

И я!


5) Селектор групп CSS

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

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

Давайте посмотрим код CSS без селектора групп.

h2 { выравнивание текста: центр; цвет синий; } h3 { выравнивание текста: центр; цвет синий; } п { выравнивание текста: центр; цвет синий; }

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

h2, h3, p { выравнивание текста: центр; цвет синий; }

Давайте посмотрим полный пример селектора групп CSS.

<стиль> h2, h3, p { выравнивание текста: центр; цвет синий; }

Здравствуйте, Javatpoint.com

Здравствуйте, Javatpoint.com (более мелким шрифтом)

Это абзац.

Проверить это сейчас

Выход:

Привет Javatpoint.com

Hello Javatpoint.com (более мелким шрифтом)

Это абзац.

Использование селекторов · Документы WebPlatform

Сводка

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

Информация: Селекторы

CSS имеет собственную терминологию для описания языка CSS. В предыдущем уроке вы создали строку в своей таблице стилей, например:

  strong {
  красный цвет;
}
  

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

  • Деталь внутри скобок - это декларация .
  • Ключевое слово color - это свойство , а red - это значение .
  • Точка с запятой после пары "свойство-значение" отделяет ее от других пар "свойство-значение" в том же объявлении.

В данном руководстве такой селектор, как strong , называется селектором tag ; вы также увидите, что его обычно называют селектором element . В спецификации CSS он называется селектором типа .

Помимо имен тегов, в селекторах можно использовать значения атрибутов. Это позволяет вашим правилам быть более конкретными. Два атрибута, class и id, имеют особый статус для CSS.

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

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

В таблице стилей введите точку (точку) перед именем класса, когда вы используете ее в селекторе.

Селекторы ID

Используйте атрибут id в элементе, чтобы присвоить элементу идентификатор. Выбор имени для идентификатора зависит от вас. Имя ID должно быть уникальным в документе.

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

Пример селектора класса и идентификатора

Этот тег HTML имеет атрибут class и атрибут id :

  

id значение основной должен быть уникальным в документе, но другие теги в документе могут иметь то же имя key class name.

В таблице стилей CSS это правило делает все элементы с ключом класса зеленым. (Не все они могут быть

элементом.)

  .key {
  цвет: зеленый;
}
  

Это правило делает один элемент с идентификатором основной жирным шрифтом:

  #principal {
  font-weight: жирный;
}
  

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

Комбинированные переключатели

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

Например, селектор .key выбирает все элементы, которые имеют имя класса key . Селектор p.key выбирает только

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

Вы не ограничены двумя специальными атрибутами: class и id .Вы можете указать другие атрибуты, используя квадратные скобки. Например, селектор [type = 'button'] выбирает все элементы, которые имеют атрибут типа со значением button .

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

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

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

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

Псевдоклассы вместе с псевдоэлементами позволяют применять стиль к элементу не только в отношении содержимого дерева документа, но и в отношении внешних факторов, таких как история навигатора (например, посещенного) , статус его содержимого (например: проверено на некоторых элементах формы) или положение мыши (например: hover, который позволяет узнать, находится ли указатель мыши над элементом или нет).Полный список селекторов см. В разделе css / selectors.

  selector: pseudo-class {
  стоимость имущества;
}
  

Информация: селекторы на основе отношений

В

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

||
| Селектор | Выбирает |
| A E | Любой элемент E, являющийся потомком элемента A (то есть дочерний элемент или дочерний элемент дочернего элемента, и т. Д. .) |
| A> E | Любой элемент E, являющийся дочерним элементом элемента A |
| E: first-child | Любой элемент E, который является первым дочерним элементом своего родителя |
| B + E | Любой элемент E, который является следующим родственником элемента B (то есть следующим дочерним элементом того же родителя) |

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

Пример селекторов на основе отношений

Эта таблица HTML имеет атрибут id , но ее строки и ячейки не имеют индивидуальных идентификаторов:

  <таблица>
…

 Префикс 
 0001 
 по умолчанию 

…
  

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

  # data-table-1 td: first-child {font-weight: bold;}
# data-table-1 td: first-child + td {font-family: monospace;}
  

Результат выглядит так:

Повышение специфичности

Обычно, если вы делаете селектор более конкретным, вы повышаете его приоритет.

Если вы используете эти методы, вам не нужно указывать атрибуты class или id для стольких тегов в вашем документе.Вместо этого CSS выполняет свою работу.

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

Действие: Использование селекторов классов и идентификаторов

  1. Создайте HTML-страницу со следующим кодом:

      
     
       
       
        Образец документа 
       <ссылка rel = "stylesheet" href = "style1.css ">
       
       
         

    C по возрастанию S стиль S heets

    C по возрастанию S стиль S heets

  2. Теперь отредактируйте файл CSS. Заменить все содержимое на:

      сильный {цвет: красный; }
     .морковь {цвет: оранжевый; }
     .шпинат {цвет: зеленый; }
     #first {font-style: italic; }
      
  3. Сохраните файлы и обновите страницу в браузере, чтобы увидеть результат:

Вы можете попробовать изменить порядок строк в файле CSS, чтобы показать, что порядок не имеет никакого эффекта. Селекторы классов .carrot и .spinach имеют приоритет над селектором тегов strong . Селектор идентификатора #first имеет приоритет над селекторами классов и тегов.

Вопросы к упражнениям

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

Действие: Использование селекторов псевдоклассов

  1. Создайте HTML-страницу со следующим кодом:

      
     
       
       
        Образец документа 
       <ссылка rel = "stylesheet" href = "style1.css ">
       
       
         

    Перейдите на нашу главную страницу .

  2. Теперь отредактируйте файл CSS. Заменить все содержимое на:

      a.homepage: ссылка, a.homepage: посещено {
       отступ: 1px 10px 1px 10px;
       цвет: #fff;
       фон: # 666;
       радиус границы: 3 пикселя;
       граница: 1px outset rgba (50,50,50, 0,5);
       семейство шрифтов: грузия, засечки;
       размер шрифта: 14 пикселей;
       стиль шрифта: курсив;
       текстовое оформление: нет;
     }
    
     а.homepage: hover, a.homepage: focus, a.homepage: active {
       цвет фона: # 333;
     }
      
  3. Сохраните файлы и обновите страницу в браузере, чтобы увидеть результат (наведите указатель мыши на ссылку, чтобы увидеть эффект):

    Ссылка станет темно-серой.

Действие: Использование селекторов на основе отношений и псевдоклассов

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

  div.menu-bar ul ul {
  дисплей: нет;
}

div.menu-bar li: hover> ul {
  дисплей: блок;
}
  

для применения к структуре HTML, подобной следующей:

  
  

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

Заключение

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