Основные селекторы CSS - ID CSS и селектор классов - httpdoc.ru

Селекторы CSS

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

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

CSS - селектор может выбрать элемент по его id , class , type , attribute , tag и т.д. Есть много авансового CSS селекторов также, которые могут быть объединены вместе , чтобы погрузиться в арене селектора.

Вот некоторые популярные селекторы CSS:

  • Селектор тегов CSS
  • Селектор идентификатора CSS
  • Селектор классов CSS
  • Селектор групп CSS
  • Универсальный селектор CSS
  • Селектор потомков CSS

Селектор тегов CSS

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

Давайте посмотрим на синтаксис использования селектора тегов:

Синтаксис
селектор { 
     CSS стили 
 } 
                       
 Пример- 
 p { 
    color: red; 
 }

Объяснение: В примере синтаксиса мы использовали <p> тег как селектор тегов. Теперь все абзацы на веб-странице будут иметь красный цвет текста. Помните, что теги < > будут опускаться при использовании селекторов тегов. Будет использоваться только имя тега.

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

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Element Selector </title> 
  <meta charset="UTF-8">  
<style>
 p {
  color: gray;
  text-align: center;
 } 
</style>
</head>

<body>
<p> This style will be applied on every paragraph.. </p>
<p> paragraph 1 </p>
<p> paragraph 2 </p>

</body>
</html>

Выход

CSS Element Selector Example

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

пункт 1

параграф 2


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

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

Определение идентификатора в CSS

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

Синтаксис
<p id = "demo-id"> Идентификатор этого абзаца - demo_id. </p>

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

Примечание. При использовании селекторов идентификаторов перед именем идентификатора используется символ решетки (#).

Синтаксис использования ID Selector:

Синтаксис
#ID_Name { 
     Css стили 
} 
                    
Пример - 
#demo-id { 
     color: red; 
}

Объяснение: В приведенном выше примере идентификатор #demo-id используется в качестве селектора. Теперь, где бы ни применялся этот идентификатор, будь то абзац, заголовок, div или что-то еще, цвет текста внутри этого элемента будет красным.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Id Selector </title> 
  <meta charset="UTF-8"> 
<style>
#para1 {
  color: green;
  text-align: center;
}
</style>
</head>

<body>
<p id="para1"> Hello World! (This paragraph is affected by style). </p>
<p> This paragraph is not affected by the style. </p>

</body>
</html>

Выход

CSS Id Selector

Привет, мир! (Этот абзац зависит от стиля).

Этот абзац не зависит от стиля.


Примечание . Если вы добавляете один и тот же идентификатор к нескольким элементам, возможно, ваш браузер позволит стилизовать элементы с одинаковым идентификатором, но никогда этого не делайте. Никогда не рекомендуется использовать один и тот же идентификатор, так как это может создать различные проблемы в сочетании с другими языками, такими как JavaScript, TypeScript и т. Д.


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

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

Определение класса в CSS

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

Синтаксис
< p > class = "demo-class"> Класс этого абзаца - "demo-class". < / p > 
                    < p > class = "demo-class"> Это 2-й абзац того же класса. < / p > 
                    < p > class = "demo-class"> Это 3-й абзац того же класса. < / p >

В приведенном выше примере demo-class во всех абзацах используется общий класс .

Примечание. При использовании средства выбора класса перед именем класса используется точка (.).

Синтаксис использования селектора классов:

Синтаксис
.Class_Name { 
   Стиль CSS 
} 

Пример. 
.demo-class { 
	color: red; 
}

Объяснение: Любой элемент, который будет использовать демонстрационный класс в качестве имени класса, будет отображать красный цвет текста. Его можно применить к нескольким элементам.

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

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Class Selector </title> 
  <meta charset="UTF-8"> 
<style>
.center {
  color: orange;	
  text-align: center;
 }
</style>
</head>

<body>
<h1 class="center"> This heading is orange and center-aligned. </h1>
<p class="center"> This paragraph is orange and center-aligned. </p> 

</body>
</html>

Выход

CSS Class Selector Examples

Заголовок оранжевого цвета и выровнен по центру.

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


Селектор точки (.) CSS

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

Синтаксис:
Синтаксис
tag.class-name { 
	Css стили 
} 

Пример: 
p.demo-class { 
	color: red; 
}

Посмотрите на пример ниже, чтобы лучше понять это:

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Class Selector </title> 
  <meta charset="UTF-8"> 
<style>
 p.center {
  color: seagreen;
  text-align: center;
 }
</style>
</head>
<body>

<h1 class="center"> This heading will not be affected. </h1>
<p class="center"> This paragraph will be seagreen and center-aligned. </p> 
</body>
</html>

Выход

CSS Class Selector

Этот заголовок не повлияет.

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


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

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

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

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

Синтаксис использования селектора группировки:

Синтаксис
p, h2, div { 
	color: red; 
} 

p, .demo-class, h2 { 
	color: red; 
}

Explanation: Обратите внимание на то, как в приведенном выше примере используется запятая для создания селектора группировки. Мы также объединили теги с классом. Теперь все абзацы, заголовки h2, div или элементы с .demo-class будут отображать шрифт красного цвета.
Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Grouping Selector </title> 
  <meta charset="UTF-8">
<style>
h1, h2, p {
    color: seagreen;
    text-align: left;
    }

</style>
</head>

<body>
<h1> This heading is seagreen and left-aligned. </h1>
<h2> This heading is seagreen and left-aligned. </h2>
<p> This paragraph is seagreen and left-aligned. </p> 

</body>
</html>

Выход

CSS Grouping Selector

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

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

Этот абзац выполнен в зеленом цвете и выровнен по левому краю.


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

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

Синтаксис использования универсального селектора:

Синтаксис
* { 
	Css стили 
} 

Пример: 
* { 
	margin: 0; 
	padding: 0; 
}

Взгляните на пример ниже:

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Universal Selector </title> 
  <meta charset="UTF-8">  
<style>
*{
    color: green;
    text-align: left;
    font-size:20px;
    }
</style>
</head>

<body>
<h1> This is heading 1. </h1>
<h2> This is heading 2 </h2>
<p> This style will be applied on every paragraph. </p> 

</body>
</html>

Выход

CSS Universal Selector

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

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

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


Мы узнали о некоторых популярных селекторах CSS, но есть и дополнительные селекторы, которые могут оказать огромное влияние на выбор и стили элементов. Оставайтесь с нами!