CSS-селекторы

Оглавление

    Показать оглавление

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

CSS-селекторы

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

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

  • Простые селекторы (выбирайте элементы по имени, идентификатору, классу)

  • Селекторы-комбинаторы (выберите элементы, основанные на определенных отношениях между ними)

  • Селекторы псевдоклассов (выбирают элементы по определенному состоянию)

  • Селекторы псевдоэлементов (выберите и стилизовать часть элемента)

  • Селекторы атрибутов (выбирают элементы на основе атрибут или значение атрибута)

На этой странице будут описаны самые основные селекторы CSS.

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

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

Пример

Здесь все элементы <p> на странице будут с выравниванием по центру, с красным цветом текста:

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

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-align: center;
  color: red;
} 
</style>
</head>
<body>

<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>

</body>
</html>

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

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

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

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

Пример

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

#para1
{
  text-align: center;
  color: red;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

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

</body>
</html>

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

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

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

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

Пример

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

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

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p> 

</body>
</html>

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

Пример

В этом примере будут только элементы <p> с class="center" красный и по центру:

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

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

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

</body>
</html>

HTML-элементы также может относиться к более чем одному классу.

Пример

В этом примере элемент <p> будет стилизован в соответствии с class="center" и класс="большой":

<p class="center large">This paragraph refers to two classes.</p>

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
  text-align: center;
  color: red;
}

p.large {
  font-size: 300%;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p> 

</body>
</html>

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

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

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

Пример

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

 *
{
  text-align: center;
  color: blue;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
* {
  text-align: center;
  color: blue;
}
</style>
</head>
<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>

</body>
</html>

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

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

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

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

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

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

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

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

Пример

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

h1, h2, p
{
   
text-align: center;
  color: red;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

</body>
</html>

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

Селектор:

#id

Пример:

#firstname

Пример описания: выбирает элемент с id="firstname"

Селектор:

.class

Пример:

.intro

Пример описания: выбирает все элементы с class="intro"

Селектор:

element.class

Пример:

p.intro

Пример описания: Выбирает только элементы <p> с class="intro"

Селектор:

*

Пример:

*

Пример описания: выбирает все элементы.

Селектор:

element

Пример:

p

Пример описания: выбирает все элементы <p>.

Селектор:

element,element,..

Пример:

div, p

Пример описания: выбирает все элементы <div> и все элементы <p>.