freeCodeCamp/guide/russian/css/class-selector/index.md

title, localeTitle

title	localeTitle
Class Selector	Селектор классов

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

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

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

Например

.center { 
   text-align: center; 
   color: red;
}

Здесь все элементы HTML с class="center" будут красными и центрированными.

Примеры:

<h1 class="test">This is a heading 1</h1> 
 <p class="test">This is a paragraph 1</p> 
 <h2 class="test">This is a heading 2</h2> 
 <p class="test">This is a paragraph 2</p> 
 <div class="test2 test3">This is a div 1</div> 

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

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

.test { 
  color: green; 
 } 

Все <p> элементы класса test будут применяться с этим стилем:

p.test { 
  border: 1px solid black; 
  color: red; 
 } 

Все <h1> и <h2> Элементы класса test будут применяться с этим стилем:

h1.test, h2.test { 
  color: blue; 
 } 

Все элементы, которые имеют как класс test2 и test3 будут применяться в этом стиле:

.test2.test3 { 
  color: green; 
 } 

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

Дополнительная информация:

Синтаксис и селектор CSS: w3schools