files/ru/glossary/css_selector/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

---
title: CSS-селектор
slug: Glossary/CSS_Selector
tags:
  - CSS
  - CSS-селектор
  - HTML
  - Глоссарий
  - селектор
translation_of: Glossary/CSS_Selector
original_slug: Глоссарий/CSS_Selector
---
<p><strong>CSS-селектор</strong> это часть CSS-правила, которая позволяет вам указать, к какому элементу (элементам) применить стиль. Например:</p>

<pre class="notranslate"><code>***HTML***
&lt;div&gt; I am inside of a div element. &lt;/div&gt;
&lt;p&gt; I am inside of a paragraph element. &lt;/p&gt;


***CSS***
div {
 color: green;
}

p {
 color: red;
}</code>
</pre>

<p>В первом CSS-правиле я выбираю элемент div и задаю его стиль (цвет текста <span class="st">—</span> зелёный). Во втором CSS-правиле выбираю элемент p и задаю красный цвет текста. Вот как выглядит результат:</p>

<p><img alt="CSS selector coding results" src="https://mdn.mozillademos.org/files/13941/cssSelectorMDNGlossary.jpg" style="border: 1px solid black; height: 101px; width: 343px;"></p>


<h2 id="Смотрите_также">Смотрите также</h2>

<h3 id="Основные_статьи">Основные статьи</h3>

<ol>
 <li>Базовые селекторы
  <ol>
   <li><a href="/en-US/docs/Web/CSS/Type_selectors">Селекторы по типу</a> <code>elementname</code></li>
   <li><a href="/en-US/docs/Web/CSS/Class_selectors">Селекторы по классу</a> <code>.classname</code></li>
   <li><a href="/en-US/docs/Web/CSS/ID_selectors">Селекторы по ID</a> <code>#idname</code></li>
   <li><a href="/en-US/docs/Web/CSS/Universal_selectors">Универсальные селекторы</a> <code>* ns|* *|*</code></li>
   <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Атрибутивные селекторы</a> <code>[attr=value]</code></li>
   <li><a href="/en-US/docs/Web/CSS/Pseudo-classes">Селекторы состояния элементов</a> <code>a:active, a:visited</code></li>
  </ol>
 </li>
 <li>Группирующие селекторы
  <ol>
   <li><a dir="ltr" href="/ru/docs/Web/CSS/Selector_list" lang="ru-RU">Список селекторов</a> <code>A, B</code></li>
  </ol>
 </li>
 <li>Комбинаторы
  <ol>
   <li><a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Adjacent sibling selectors</a> <code>A + B</code></li>
   <li><a href="/en-US/docs/Web/CSS/General_sibling_selectors">General sibling selectors</a> <code>A ~ B</code></li>
   <li><a href="/en-US/docs/Web/CSS/Child_selectors">Child selectors</a> <code>A &gt; B</code></li>
   <li><a href="/en-US/docs/Web/CSS/Descendant_selectors">Descendant selectors</a> <code>A B</code></li>
  </ol>
 </li>
 <li>Псевдо
  <ol>
   <li><a href="/en-US/docs/Web/CSS/Pseudo-classes">Псевдоклассы</a> <code>:</code></li>
   <li><a href="/en-US/docs/Web/CSS/Pseudo-elements">Псевдоэлементы</a> <code>::</code></li>
  </ol>
 </li>
</ol>

<h3 id="Техническая_справка">Техническая справка</h3>

<p>{{SpecName("CSS3 Selectors")}}</p>