Css id selector: Селекторы по ID — CSS

Селекторы типа, класса и 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 это единственный способ нацелиться на элемент — возможно, потому вы не имеете доступа к разметке и, следовательно, возможности её редактировать — это будет работать.

Атрибут id | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Описание

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

Синтаксис

id="имя"

Значения

Идентификатор должен обязательно начинаться с латинского символа и может содержать в себе латинские буквы (A–Z, a–z), цифры (0–9), символ дефиса (-) и подчеркивания (_). Использование русских букв в именах идентификатора недопустимо.

Значение по умолчанию

Нет.

Применяется к тегам

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo><bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h2>, <h3>, <h4>, <h5>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут id</title>
  <style>
   #help {
    position: absolute; /* Абсолютное позиционирование */
    right: 0; /* Положение элемента от правого края */
    top: 20px; /* Положение от верхнего края */
    width: 225px; /* Ширина блока */
    padding: 5px; /* Поля вокруг текста */
    background: #f0f0f0; /* Цвет фона */ 
   }
  </style>
 </head> 
 <body> 
  <div>
   Этот элемент помогает в случае, когда вы находитесь в осознании того
   факта, что совершенно не понимаете, кто и как вам может помочь. Именно
   в этот момент мы и подсказываем, что помочь вам никто не сможет.
  </div>
 </body> 
</html> 

Идентификаторы | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
3.0+	7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Версии CSS

Описание

Идентификатор (называемый также «ID селектор») определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты.

Синтаксис

E#Имя_идентификатора { Описание правил стиля }
#Имя_идентификатора { Описание правил стиля }

Здесь E — обозначает любой тег. При описании идентификатора вначале указывается символ решётки (#), затем идёт имя идентификатора. Оно должно начинаться с латинского символа и может содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах идентификатора недопустимо. В отличие от классов идентификаторы должны быть уникальны, иными словами, встречаться в коде документа только один раз.

Обращение к идентификатору происходит с помощью атрибута id, значением которого выступает имя идентификатора (id=»Имя_идентификатора»). Символ решётки при этом уже не указывается.

Пример

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Идентификаторы</title>
  <style>
   #help {
    position: absolute; /* Абсолютное позиционирование */
    left: 160px; /* Положение элемента от левого края */
    top: 50px; /* Положение от верхнего края */
    width: 225px; /* Ширина блока */
    padding: 5px; /* Поля вокруг текста */
    background: #f0f0f0; /* Цвет фона */ 
   }
  </style>
 </head> 
 <body> 
  <div>
   Этот элемент помогает в случае, когда вы находитесь в осознании того
   факта, что совершенно не понимаете, кто и как вам может помочь. Именно
   в этот момент мы и подсказываем, что помочь вам никто не сможет.
  </div>
 </body> 
</html> 

Результат примера показан на рис. 1.

Рис. 1. Вид текста, оформленного с помощью идентификатора

Браузеры

В браузере Internet Explorer до версии 6.0 включительно идентификаторы иногда игнорируются, если они комбинируются с селекторами тегов или классами.

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 помогает вам выбрать элементы, основываясь на атрибуте или значении выданного атрибута.

Изучаем CSS: class или id – что лучше?

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

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

В CSS к этому div-элементу можно применять различную стилизацию:

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

Не забывайте использовать знак # (хэштег) перед именем. Подробнее об этом можно узнать здесь и здесь.

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

В CSS к нескольким абзацам можно применять различную стилизацию:

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

Не забудьте использовать знак . (точка) перед названием класса при объявлении CSS-правила. Подробнее об этом можно узнать здесь и здесь.

Cелектор id используется для отдельных элементов страницы (#header), в то время как селектор class (.content) – для нескольких. Так как значение id задается лишь одному HTML-элементу. Другими словами, у нескольких элементов не может быть одинакового значения id в рамках одной отдельной страницы. Например, у вас может быть только один элемент с id #header, или же один элемент с id #footer.

Одинаковое значение class можно задавать одному или нескольким HTML-элементам. К примеру, у вас может быть несколько абзацев с классом .content или несколько ссылок с классом .external.

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

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

Приведенную выше HTML-разметку мы начали с div-элемента container. Мы задали ему id (#container), так как на нашей странице будет размещаться единственный контейнер. Внутри него мы размещаем разделы меню (#menu) и контента (#content). Как и в случае с контейнером, у нас будет только одно меню, и один раздел с контентом. Внутри menu располагаются четыре ссылки <a>, но к каждой из них мы применили CSS class (.link). Точно также мы применили класс (.text) к каждому абзацу в div-элементе content.

Если нужно стилизовать эти элементы, то можно использовать следующий пример:

#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 используется для отдельных элементов, которые встречаются на странице только один раз. Например, заголовок, подвал, меню и т. д. Селектор class используется для одного или нескольких элементов, которые встречаются на странице несколько раз. Например, абзацы, ссылки, кнопки, элементы ввода. И хотя вы можете использовать class для отдельного элемента, но лучше использовать эти селекторы по назначению.

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

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

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

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

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

Важно правильно применять id и CSS class, так как их неправильное использование может привести к ошибкам в отображении HTML-кода.

Пожалуйста, оставьте свои мнения по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, дизлайки, лайки, подписки, отклики!

Данная публикация является переводом статьи «CSS Class vs ID: Which One to Use» , подготовленная редакцией проекта.

Чем отличаются id и class

Один из самых частых вопросов в процессе знакомства с новыми стандартами — в чем разница между атрибутами HTML-элементов «id» и «class». Ведь эффект, вроде бы, одинаковый.

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

Суть

id

уникальное собственное имя элемента на странице, то есть на странице не должно быть нескольких элементов с одним id. Например блоку с шапкой сайта можно дать id="title".

class

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

Следствия

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

Якорные ссылки

Если нужно поставить ссылку на какой-то элемент в странице, то ему достаточно дать id (<h3>...</h3>) и ссылаться на него якорем (http://site/path/#about). Это, кстати, предпочтительный способ взамен старого <a name="...">.

Множественные признаки

Элементу можно задавать несколько классов через пробелы: <img>. Причем их можно использовать и по отдельности:

/* все important элементы */
.important {color:red;}

… и в сочетании:

/* элементы с important и centered одновременно */
.important.centered {border:solid black 1px;}

Обратите внимание, что между классами в CSS-правиле нет пробела.

Разный вес в CSS

У каждого правила в CSS есть «вес», по которому определяется порядок их применений. У id этот вес больше. Поэтому если у элемента задан и id, и class:

<h3>...</h3>

… то из двух правил

#about     {color:green;}
.important {color:red;}

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

Поиск в скрипте

Элемент с «id» можно легко найти в скрипте с помощью функции document.getElementById(). Для классов такой функции нет.

---

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

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

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

К любому элементу HTML можно применить атрибут id . Значение этого атрибута — уникальный идентификатор элемента. Например,

дает этому элементу уникальный идентификатор mainHeading .

Мы можем ссылаться на этот идентификатор из нашего кода CSS.

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

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

# имя-идентификатора {свойство: значение; }

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

р # введение {размер шрифта: 2em; }

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

<стиль> div # css-section { граница: 1 пиксель, красный пунктир; отступ: 20 пикселей; }

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

Указанные классы и идентификаторы очень похожи, вам может быть интересно, какой из них использовать. Это зависит от ситуации.

Когда использовать классы

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

, к которым нужно применить один и тот же стиль.

Когда использовать идентификаторы

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