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

Содержание

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

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

Синтаксис применения идентификатора следующий.

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

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

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

Пример 9.1. Использование идентификатора

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>

В данном примере определяется стиль тега <div> через идентификатор с именем help (рис. 9.1).

Рис. 9.1. Результат применения идентификатора

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

Тег#Имя идентификатора { свойство1:
значение; свойство2: значение; … }

Вначале указывается имя тега, затем без пробелов символ решётки и название
идентификатора. В примере 9.2 показано использование идентификатора применительно
к тегу <p>.

Пример 9.2. Идентификатор совместно с тегом

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Идентификаторы</title>
  <style>
   P {
    color: green; /* Зеленый цвет текста */
    font-style: italic; /* Курсивное начертание текста */
   }
   P#opa { 
    color: red; /* Красный цвет текста */
    border: 1px solid #666; /* Параметры рамки */
    background: #eee; /* Цвет фона */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body> 
   <p>Обычный параграф</p> 
   <p>Параграф необычный</p>
 </body> 
</html>

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

Рис. 9.2. Вид текста после применения стиля

В данном примере вводится стиль для тега <p> и для такого же тега, но с указанием идентификатора opa.

Вопросы для проверки

1. В каких ситуациях имена идентификаторов и классов можно называть одинаково?

  1. Никогда, это недопустимо.
  2. В любом случае.
  3. Только, если они применяются к одному элементу.
  4. Только, если они применяются к разным элементам.
  5. Только, если в коде они встречаются один раз.

2. Какое имя идентификатора написано неправильно?

  1. id_1id1
  2. a-a-a-1-1-1
  3. L0g0
  4. bla-bla
  5. кrevedko

3. Какая ошибка содержится в следующем коде?

<div>
<div><a href=»209.html»>Подключение к MySQL через PHP</a></div>
<div><a href=»213.html»>Создание таблиц в phpMyAdmin</a></div>
<div><a href=»211.html»>Структура базы данных</a></div>
</div>

  1. Имя класса написано неверно.
  2. Имена идентификаторов написаны неверно.
  3. Неправильное вложение тегов.
  4. Повторяющиеся идентификаторы.
  5. Разные идентификаторы для однотипных элементов.

4. Как корректно задать стиль для тега <div> с идентификатором loom?

  1. loom { font-size: bold; }
  2. div { font-size: bold; }
  3. .loom { font-size: bold; }
  4. #loom# { font-size: bold; }
  5. #loom { font-size: bold; }

Ответы

1. В любом случае.

2. кrevedko

3. Повторяющиеся идентификаторы.

5. #loom { font-size: bold; }

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) не нужно. Она требуется только в обозначении селектора в таблице стилей.

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

id — идентификатор | CSS селектор

Поддержка браузерами

Описание

CSS селектор id позволяет применить стиль к определённому элементу на странице, в котором указан необходимый идентификатор. Определение селектора id в CSS коде начинается с символа решётки «#«, за которым следует имя идентификатора:

#myid { color: blue; }

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

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

Селектор id имеет некоторые особенности:

  • В имени идентификатора разрешается использовать только буквы, числа, дефис и знак подчеркивания

  • Имя идентификатора всегда должно начинаться с буквы

  • Имена идентификаторов чувствительны к регистру символов, например: #Menu и #menu это два разных идентификатора

Пример:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Пример</title>
    <style>
      #myname {color:red;}
    </style>
  </head>

  <body>
    <h2>Добро пожаловать!</h2>

    <div>
      <p>Меня зовут Арни.</p>
      <p>Я играю в онлайн игры.</p>
    </div>
    <p>Моего кота тоже зовут Арни.</p>

  </body>
</html>
Результат данного примера:

Добро пожаловать!

Меня зовут Арни.

Я играю в онлайн игры.

Моего кота тоже зовут Арни.

Идентификаторы | CSS | WebReference

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

Синтаксис 

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

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

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

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Пример

<!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 до версии 7 идентификаторы иногда игнорируются, если они комбинируются с селекторами элементов или классами.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02.03.2020

Редакторы: Влад Мержевич

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

CSS селекторы

Значение и применение

Селектор id в CSS.

Основная задача селектора id заключается в том, чтобы выбрать элемент с определённым идентификатором.

В настоящее время id селекторы в основном применяются на веб страницах с целью динамического управления элементами с использованием языка программирования JavaScript.

Обратите внимание на следующие правила, которые необходимо соблюдать при работе с id селекторами:

  • значение идентификатора должно быть уникально на странице, размещение нескольких одноименных идентификаторов на странице считается ошибкой (выборка остановится на первом идентифакторе).
  • все названия id селекторов должны начинаться с решётки (благодаря ей браузеры находят эти селекторы в таблице стилей). Решетка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута id она не ставится, будьте внимательны из-за этого возникает много ошибок).
  • используйте только буквы алфавита (A-Z, a-z), числа, дефисы, знаки подчеркивания.
  • название после решётки всегда должно начинаться с символа (неправильно: #50cent, #-vottakvot).
  • учитывайте регистр при наименовании id селекторов, т.к. они к этому чувствительны (#vottakvot и #VotTakVot разные идентификаторы).

Поддержка браузерами

CSS синтаксис:

#id {
блок объявлений;
}

Версия CSS

CSS1

Пример использования

Для начала необходимо создать идентификатор, назначив ему имя, которое нам необходимо придумать самостоятельно:

#test { /* имя идентификатора в таблице стилей задается через решетку */
background-color: #00FF00; /*Задаём цвет заднего фона*/
color: white; /*Задаём цвет шрифта белый*/
font-size: 30px; /*Указываем размер шрифта*/
width: 600px; /*Указываем ширину элемента*/
height: 40px; /*Указываем высоту элемента*/
text-align: center; /*Выравниваем текст по центру внутри элемента*/
}

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

<h3 id = "test">Обычный заголовок второго уровня</h3> <!-- задаем идентификатор для элемента -->

Теперь соберем это в одном примере и посмотрим результат:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title> ID селекторы</title>
<style>
#test {
background-color: #0F0; /* задаём цвет заднего фона */
color: white; /* задаём цвет текста */
font-size: 30px; /* указываем размер шрифта */
height: 100px; /* указываем высоту элемента */
text-align: center; /* горизонтальное выравнивание текста по центру */
}
</style>
</head>
<body>
	<h3 id = "test">Обычный заголовок второго уровня</h3> 
</body>
</html>

Результат нашего примера:

Пример использования id селектора.CSS селекторы

Классы и 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 к элементам страницы (тегам)

Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!

22.04.2013

Здравствуйте дорогие подписчики и не менее дорогие гости Site on! Надеюсь, вам были интересны предыдущие статьи раздела HTML + CSS, потому как сегодня скучать точно не придётся, ведь мы рассмотрим такое понятие как селекторы CSS и как с их помощью мы можем сократить нашу разметку HTML, сделав её чище.

Селектор CSS – это тот элемент, к которому мы собираемся применять CSS свойства. Слово «селектор» говорит само за себя, оно обозначает выбор.

p {color: red}
div span {background: green}
ul li {list-style: none}

Селекторы class и id

В примере выше мы имеем 3 селектора – это p, div span, ul li. То есть весь наш файл стилей состоит из селекторов и их свойств. Наиболее удобно и наглядно, особенно новичкам, брать за селектор имя класса (class) тега или уникальный идентификатор (id) тега. Чтобы присвоить класс или идентификатор какому-либо тегу, мы должны указать их среди атрибутов этого тега. У конкретного тега может быть максимум 1 идентификатор и бесконечное число классов. Пример:

<div>текст в первом диве</div>
<div>текст во втором диве</div>
<div>текст в третьем диве</div>

На что стоит обратить внимание:

  • Классы и идентификаторы можно присваивать любым (всем) тегам.
  • Каждый id уникален и не может повторяться в пределах одной страницы, в отличие от классов!
  • Один и тот же класс может быть присвоен любым тегам и может повторяться любое количество раз на странице.
  • Если мы хотим задать конкретному тегу несколько классов, мы просто задаём их через пробел.
  • Имена классов и идентификаторов могут совпадать, при этом кроме имени, ничего общего между ними не будет.

Как обратиться к классу или id в файле стилей (CSS)?

Смотрим пример:

#first {color: red;} /* обращаемся к id с именем first */
.second {color: blue;} /* обращаемся к классу с именем second */
#first .second {color: orange;} /* обращаемся к классу с именем second, ТОЛЬКО если он находится ВНУТРИ тега с идентификатором first */
.first .third {color: grey;} /* обращаемся к классу с именем third, ТОЛЬКО если он находится ВНУТРИ тега с классом first */

В нашем случае последние две инструкции не сработают, так как у нас нет классов, вложенных внутрь тегов с заданными атрибутами. Как вы могли заметить, чтобы обозначить, что мы обращаемся именно к id, нужно перед его именем без пробелов поставить знак решётки (#), если мы обращаемся к классу, то перед именем класса должны поставить точку (.).

Использование классов и идентификаторов очень удобно, но оно увеличивает нашу HTML разметку, в идеале (которого никогда нет) мы вовсе не должны их использовать, вместо них мы будем использовать комбинации и группировки селекторов, о них и будет вся остальная часть статьи, но! Но это совсем не означает, что вы должны полностью отказаться от использования классов и идентификаторов, просто вы должны иметь ввиду, что очень часто вместо создания нового class или id можно обойтись приёмами, описанными ниже и они также могут быть вполне удобны.

В чём различие class и id?

Кроме приведённых выше различий, стоит ещё отметить, что у свойств заданных id приоритет выше, чем у свойств, заданных классу. То есть, если мы напишем:

 <style>
#first {color: red;}
.blue {color: blue;}
</style>
<div>текст в диве</div>

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

По синтаксису: в случаи с классом мы можем выбрать, у какого именно тега должен находиться данный класс, для этого после имени тега БЕЗ пробела мы должны обратиться к классу. Пример:

.myclass {свойства} /* применятся ко всем тегам, которые содержат класс myclass */
div.myclass {свойства} /* применятся только к тегам div, которые содержат класс myclass */

Для id это тоже будет работать, но такая запись лишена всякого смысла, так как id не может повторяться на странице, а значит достаточно просто объявлять id, без тега к которому оно относится:

<style>
#super {свойства} /* правильно */
div#super {свойства} /* Неправильно, но работать будет */
</style>
<div>текст</div>

Вроде бы осталось только одно неоговорённое отличие, и оно касается темы, которую в ближайшем будущем я не планировал затрагивать на этом блоге – Javascript. Но всё же обязан доложить вам о нём: если вы хотите обратиться к элементу с помощью Javascript, то для этой цели очень удобным будет наличие id у этого элемента. Чтобы обратиться к элементу по его классу в Javascript нет такой встроенной возможности, вам придётся использовать вспомогательные функции + это не всегда кроссбраузерно.

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

Родственный селектор

Идём дальше. Из статьи о наследовании в CSS вы уже знаете о двух самых простых видах селекторов, это селектор по тегу (элементу) и по потомку. Давайте освежим вашу память:

 div p {color: green;} /* Селектор по потомку */
p {color: red;} /* селектор по тегу */

Но как я уже писал в предыдущей статье, в первом случае CSS свойства применятся ко всем тегам p вложенным на ЛЮБУЮ глубину тега div. А что если мы хотим применить свойства только к прямым наследникам, то есть к первому уровню вложенности:

<div>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <span>
      <p>Третий уровень</p>
    </span>
  </span>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <p>Второй уровень</p>
  </span>
  <p>Прямой наследник (первый уровень)</p>
</div>

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

div>p {color: blue;} /* только первый уровень вложенности */
div p {color: blue;} /* абсолютно все параграфы внутри div */

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

С этим разобрались, у нас на вооружении уже 3 вида селекторов, теперь хочу вам рассказать о весьма необычном селекторе, который выделяется среди всех остальных – это так называемый универсальный селектор, который обозначается звёздочкой (*):

* {margin: 0; padding: 0;}

Так у меня начинается каждый новый проект, советую вам делать также. Универсальный селектор распространяется на все элементы страницы (теги), но имеет нулевой приоритет (ниже только отсутствие приоритета вовсе). Его обычно используют, чтобы перебить CSS свойства, которые браузеры устанавливают по умолчанию для некоторых тегов. Представьте себе, и такое имеет место быть! Достаточно многим тегам браузеры по умолчанию устанавливают свои свойства, например, тегу гиперссылки <a> синий цвет текста и подчёркивание, тегу body они задают поля (padding) и тд. Нам это запоминать, знать и использовать совсем не к чему, поэтому самые банальные свойства мы сразу же убираем с помощью универсального селектора, однако я бы не советовал дописывать в него что-то ещё (или дописывать, но аккуратно), несмотря на наименьший (нулевой) приоритет универсального селектора, он в некоторых случаях всё же может перебить вам другие свойства, так что имейте это в виду.

Кстати говоря, при работе с селекторами, как и при любой работе связанной с вёрсткой макета очень удобно использовать просмотр элементов страницы. Если вы ещё не в курсе таких вещей как Opera Dragonfly, Firebug и веб-инспекторы в целом, то вам без преувеличений срочно нужно прочесть статью по ссылке выше! А кто уже использовал подобные вещи, прошу дальше за мной.

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

В отличие от классов, псевдо-классы не нужно указывать в HTML разметке, они сами вычисляются браузером. У нас есть 4 статических псевдо-класса и 3 динамических псевдо-класса, без учёта CSS 3, о нём ближе к концу. К статическим относятся ( :first-child, :link, :visited, : lang() ):

<style>
p:first-child {color: green;} /* сработает, если p является первым ребёнком своего родителя */
</style>
<div>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <span>
      <p>Третий уровень</p>
    </span>
  </span>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <p>Второй уровень</p>
  </span>
  <p>Прямой наследник (первый уровень)</p>
</div>

Результат:

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

div>span p:first-child {color: green;} /*сработает, если p является первым ребёнком своего родителя и находится внутри тега span, который является прямым потомком тега div */

Название представленного выше псевдо-класса говорит само за себя first-child — первый ребёнок.

Следующие два статических псевдо-класса применяются только к тегу гиперссылки (:link, :visited), они применяют CSS свойства в зависимости от того, посещалась данная ссылка конкретным пользователем или нет:

a:link {color: blue;} /* у не посещённых ссылок задаём синий цвет, и по умолчанию они подчёркнуты */
a:visited {color: green; text-decoration: none;} /* у посещённых ссылок текст будет зелёным, убираем подчёркивание */

Псевдо-класс :lang() используется для задания разного стиля оформления в зависимости от языка. В скобочках указывается язык, к которому нужно применить оформление. Это можно использовать, например, для задания разных стилей кавычек в цитатах:

q:lang(de) {quotes: "\201E" "\201C";} /* кавычки для немецкого языка */
q:lang(en) {quotes: "\201C" "\201D";} /* кавычки для английского языка */
q:lang(ru) {quotes: "\00AB" "\00BB";} /* кавычки для русского языка */

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

Динамические псевдо-классы

Динамические псевдо-классы – это :active, :hover, :focus. Динамические псевдо-классы срабатывают по определённому действию на странице, они работают для всех тегов, а не только для ссылок как многие думают и даже утверждают в своих блогах! Рассмотрим их применение:

p:active {background: red;} /* стиль, который применится к тегу по нажатию на него (клику мышью) */
input:focus {width: 400px;} /* стиль, который применится к элементу, на котором в данный момент фокус (работает, к примеру, для текстовых полей ввода: textarea, input). В данном случае по взятию в фокус, ширина input станет равна 400 пикселей, удобно использовать для красивого эффекта удлинения поля по клику. */
div:hover {background: green;} /* срабатывает по наведению курсора на элемент, в основном применяется для создания красивого эффекта при наведении на ссылки. */

Примените данные стили к нашему примеру выше, и вы сами всё увидите.

Смежные селекторы

Смежные селекторы – это ближайший сосед ниже по коду, не ребёнок! Очень удобный селектор:

<style>
div + p {background: green; color: white;} /* Применить свойства к тегу p, если сразу после закрывающегося тега div открывается тег p */
p + span {background: orange;} /* не сработает, так как у нас нет открывающегося тега span, сразу после закрывающегося тега p */
</style>
<div>
  <p>текст в параграфе первого div</p>
</div>
<p>текст в параграфе ВНЕ div</p>
<div>
  <p>текст в параграфе второго div</p>
</div>
<span>текст в спане</span>
<p>снова параграф вне div</p>

Результат:

Обобщённые смежные селекторы

Обобщённые смежные селекторы действуют точно также как и обычные смежные селекторы, за исключением того, что свойства применяются не только к первому соседу ниже, а ко всем заданным соседям ниже:

<style>
div~p{color: green;}
</style>

<div>текст в диве</div>

<p>параграф</p>
<p>параграф</p>
<p>параграф</p>

<span>текст в спане</span>

<p>параграф</p>
<p>параграф</p>

<div>
<p>параграф в диве</p>
<p>параграф в диве</p>
</div>

<span>текст в спане</span>
<p>параграф</p>

Результат:

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

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

p[align] {свойства} /* применить ко всем тегам p, у которых есть атрибут align */

p[align="center"] {свойства} /* где значение атрибута align равно center */

p[align^="center"] {свойства} /* где значение атрибута align начинается на center */

p[align*="center"] {свойства} /* где значение атрибута align содержит center */

p[class~="site"] {свойства} /* где site может находиться среди других слов, отделенных пробелами (<p></p>) */

p[class|="site"] {свойства} /* где значение атрибута class состоит только из слова site или начинается им, после чего ставится дефис и пишется остальная часть значения (<p></p> или <p></p>) */

p[class$="site"] {свойства} /* где значение атрибута align заканчивается на site */

CSS 3 псевдо-классы

Вы уже ознакомились со всеми основными селекторами и вам на первых парах этого должно хватить с горкой. Однако в CSS 3 появилось множество новых псевдо-классов, теперь мы можем брать не только первого ребёнка, но и любого другого по счёту, можем идти от обратного, брать не первого, а последнего ребёнка и так далее и тому подобное. Всё это очень удобно и практично, разве что у вас могут возникнуть проблемы со старыми версиями IE. Давайте соберём все силы в кулак и пробежимся по всем оставшимся селекторам, чтобы потом уже вы могли иметь их ввиду при вёрстке собственного макета.

:last-child – аналог :first-child, только берёт не первого, а последнего ребёнка.

:only-child – сработает, если элемент (тег) является единственным ребёнком.

:only-of-type — сработает, если элемент (тег) является единственным ребёнком своего типа.

:nth-child() – обращается к потомкам по их порядковым номерам, можно обращаться ко всем чётным или нечётным (even или odd) числам. Например:

<style>
div p:nth-child(5) {background-color: green;} /* Обращаемся к 5 по счёту ребёнку, если он является тегом p. */

div p:nth-child(2n) {background-color: yellow;} /* Обращаемся к каждому второму ребёнку, если он является тегом p. */

div p:nth-child(2n+6) {background-color: red;} /* Обращаемся к каждому второму ребёнку начиная с шестого, если он является тегом p. */
</style>

<div>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>

<span>текст в спане</span>

<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
</div>

Результат:

:nth-last-child – работает также как и предыдущий, но отчёт начинается с конца.

:first-of-type – первый ребёнок своего типа в рамках прямого родителя.

:last-of-type – последний ребёнок своего типа в рамках прямого родителя.

:empty – сработает для тех тегов, внутри которых нет ни одного символа (без текста).

:not() – делает исключение для заданных элементов. Пример:

<style>
p:not(.roll) {color: red;} /* для всех параграфов на странице делаем красный цвет текста, за исключением параграфов с классом roll */
</style>

<p>параграф с классом roll</p>

<p>параграф</p>
<p>параграф</p>

<p>параграф с классом roll</p>

Результат:

Управление полями, формами, переключателями и флажками в CSS

:enabled — применяется к доступным элементам интерфейса как формы, кнопки, переключатели и тд. По умолчанию все элементы интерфейса являются доступными.

:disabled — применяется к заблокированным элементам интерфейса как кнопки, формы и так далее. Элементы интерфейса являются заблокированными, если к ним в HTML добавить атрибут disabled или в XHTML disabled=”disabled”.

:checked – применяется к элементам интерфейса типа переключатели (radio) и флажки (checkbox), когда они находятся во включённом положении.

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

Псевдо-элементы, аналогично псевдо-классам вычисляются браузером автоматически, нам об этом заботиться не нужно. Чтобы не путать псевдо-элементы с псевдо-классами в спецификации CSS 3 было решено использовать двойное двоеточие, вместо одинарного, как было в CSS 2. Поэтому в Интернете вы можете встретить псевдо-элементы как с одинарным двоеточием так и с двойным – и тот и тот вариант верен. Однако для лучшей совместимости с IE рекомендуют использовать одинарное двоеточие.

:first-line – первая строка внутри блочного или табличного элемента.

:first-letter – первая буква внутри блочного элемента.

:before и :after – используются чтобы с помощью CSS вставить содержимое до или после элемента, к которому они относятся, лично я ими не пользовался, поэтому сильно расписывать не буду. А как часто вы используете данные псевдо-элементы в своих проектах? Можете поделиться своим опытом в комментариях к данной статье.

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

Преимущества оптимизации HTML за счёт CSS

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

Внешние файлы стилей, как и внешние файлы Javascript отлично кэшируются, а это значит, что зайдя первый раз на любую страницу вашего сайта, браузер пользователя запоминает эти файлы и более их не скачивает, в отличие от самой страницы сайта, то есть вашей HTML разметки, картинок и текста, которую браузер загружает снова и снова. Тоже самое касается и поисковых систем, им вообще нет дела до ваших внешних файлов, но вот до объёма и содержания вашей HTML разметки им дело есть. Поисковым системам приходится сканировать всю структуру страницы и в ваших же интересах помочь им в этом, сосредоточить их усилия на контенте, а не на громоздкой стене разметки состоящей из кучи классов и идентификаторов или того хуже – Javascript обработчиков событий и CSS стилей прямо в атрибутах тегов (и такое до сих пор бывает).

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

Подытожим: благодаря оптимизации и сокращению HTML мы имеем совсем небольшой выигрыш в скорости загрузки сайта и в SEO (поисковой оптимизации), а также более чистый код.

Пожалуйста, оцените эту статью

Средняя оценка: 4.87 из 5 (проголосовало: 307)

Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!

Вы можете помочь развитию проекта, сделав всего 1 клик:

Спасибо!

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 могут быть определены по типу, классу, атрибуту, псевдосостоянию или имени идентификатора.То, как вы их определяете, повлияет на то, как вы настраиваете их с помощью селекторов 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; 
}

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

См. Pen 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 Как НЕ использовать CSS ID [Пример] Кристины Перриконе (@hubspot) на CodePen.

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

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

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

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

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

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

Вот HTML:

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

Вот код CSS:

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

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

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

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

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

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

.

Еще одно ключевое различие между селектором класса и селектором идентификатора — специфичность. Селекторы 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 {
 цвет фона: # FF00FF; 
 цвет: # 000000; 
} 
 .btn {
 цвет фона: # 00A4BD; 
 цвет: #FFFFFF; 
}

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

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

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

Селекторы

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

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

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

Обзор

До сих пор вы добавляли стиль к различным элементам на странице портфолио, но добавленные стили повлияли на всех элементов определенного типа.Например, когда вы добавили стиль к элементу div, это одинаково повлияло на все элементы div. Что, если вы хотите стилизовать некоторые элементы div одним способом, а другие элементы div — другим? Вот где на помощь приходят id и class. В этом уроке вы узнаете, как атрибуты ID и Class могут использоваться для стилизации отдельных элементов (id) или групп элементов (class).

Результаты учащихся

По завершении этого упражнения:

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

Что такое id?

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