HTML и CSS / Список всех Селекторов в CSS

* { margin:0; padding:0; }

#container * { border: 1px solid black; }

<div class="error">
.error { color: red; }

<div id="container">
#container { width: 960px; margin: auto; }

a { color: red; }
ul { margin-left: 0; }

h2,
li a { color: red; }

.parent > li{ border: 1px solid red; }

<ul class="parent">
<li> список1
<ul class="child">
<li>список11</li>
<li>список12</li>
</ul>
</li><!-- затронет -->
<li>список2</li><!-- затронет -->
<li>список3</li><!-- затронет -->
</ul>

a[title] { color: green; }

<a href="" title="описание">текст</a>
<a href="">текст 2</a>

a[href="http://example.com"] { color: red; }
Окрасит только "текст":
<a href="http://example.com">текст</a><!-- color: red; -->
<a href="http://example.com/article">текст 2</a>

a[href*="example"] { color: red; }

<a href="http://example.com">текст</a><!-- color: red; -->
<a href="http://example.com/article">текст 2</a><!-- color: red; -->
<a href="http://xxx.ru/article">текст 2</a>

a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}

<a href="http://example.com">текст</a>
<a href="/article">текст 2</a>

a[href$=".jpg"] { color: red; }

<a href="http://example.com/foto.jpg">текст</a>
<a href="http://example.com/foto2.png">текст 2</a>

a[data-info ~= "external"] { color: red; }

a[data-info ~= "image"] { border: 1px solid black; }

:target { color: red; }

<a href="#anchor1">Перейти на якорь 1</a>
<a href="#anchor2">Перейти на якорь 2</a>

<!-- При клике по этим ссылкам выберется соответствующий элемент ниже -->
<p id="anchor1">Элемент 1</p>
<p id="anchor2">Элемент 2</p>

input[type=radio]:checked { border:1px solid black; }

<form>
<input type="submit"><!-- будет выбран -->
<input type="submit">
<input type="reset">
</form>

<form action="#">
<legend>Shipping address</legend>
<input type="text" placeholder="Name">
<input type="text" placeholder="Address">
<input type="text" placeholder="Zip Code">
</form>

input[type="text"]:disabled {
background: #dddddd;
}

select.country:disabled {
background: #dddddd;
}

<form action="#">
<legend>Shipping address</legend>
<input type="text" placeholder="Name" disabled="disabled">
<input type="text" placeholder="Address">
<input type="text" placeholder="Zip Code">
</form>

input[type="text"]:enabled {
background: #fff;
}

input[type="text"]:disabled {
background: #dddddd;
}

.box {
background: red;
height: 200px;
width: 200px;
}

.box:empty {
background: lime;
}

<div class="box"><!-- пустой --></div>
<div class="box">Я буду красным</div>
<div class="box">
<!-- Я буду красным, так как перед комментарием стоят пробелы -->
</div>

li:before {
content: '-';
display: inline-block;
margin-right: .5em;
}

.clear:after {
content: '';
display: table;
clear: both;
}

input:focus {
background-color: yellow;
}

a:focus {
outline: 2px solid yellow;
}

input[type=text] {
width: 100px;
transition: ease-in-out, width .35s ease-in-out;
}

input[type=text]:focus {
width: 250px;
}

div:focus-within {
background: cyan;
}

<form>
<label for="given_name">Given Name:</label>
<input id="given_name" type="text">
<br>
<label for="family_name">Family Name:</label>
<input id="family_name" type="text">
</form>

form {
border: 1px solid;
color: gray;
padding: 4px;
}

form:focus-within {
background: #ff8;
color: black;
}

input {
margin: 4px;
}

a:hover { border-bottom: 1px solid black; }

div:hover { background: #e3e3e3; }

*:not(p) { color: green; }

ul li:not(.last) { color: blue; }

<ul>
<li>элемент 1</li>
<li>элемент 2</li>
<li class="last">элемент 3</li>
</ul>

p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right:2px;
}

p::first-line {
font-weight: bold;
font-size: 1.2em;
}

<h1>Заголовок</h1>
<p>Первый параграф.</p><!-- p:nth-child(2) -->
<p>Второй параграф.</p><!-- p:nth-of-type(2) -->

p:nth-child( odd ) {
background: red;
}
p:nth-child( even ) {
background: blue;
}

<h1>Заголовок</h1>
<p>Первый параграф.</p><!-- blue -->
<p>Второй параграф.</p><!-- red -->
<p>Третий параграф.</p><!-- blue -->

p:nth-child(2) { color: red; }

<h1>Заголовок</h1>
<p>Первый параграф.</p><!-- red -->
<p>Второй параграф.</p>
<p>Третий параграф.</p>

p:nth-child(3n) { background: red; }

<h1>Заголовок</h1>
<p>Параграф 1</p>
<p>Параграф 2</p><!-- background: red -->
<p>Параграф 3</p>
<p>Параграф 4</p>
<p>Параграф 5</p><!-- background: red -->
<p>Параграф 6</p>
<p>Параграф 7</p>
<p>Параграф 8</p><!-- background: red -->
<p>Параграф 9</p>

li:nth-last-child(2) { color: red; }

<h1>Заголовок</h1>
<p>Первый параграф.</p>
<p>Второй параграф.</p><!-- red -->
<p>Третий параграф.</p>

<h1>Заголовок</h1>
<p>Первый параграф.</p><!-- p:nth-child(2) -->
<p>Второй параграф.</p><!-- p:nth-of-type(2) -->

p:nth-of-type(odd) { background: red; }
p:nth-of-type(even) { background: blue; }

<h1>Заголовок</h1>
<p>Первый параграф.</p><!-- red -->
<p>Второй параграф.</p><!-- blue -->
<p>Третий параграф.</p><!-- red -->

li:nth-of-type(2) { color: red; }

<h1>Заголовок</h1>
<p>Первый параграф.</p>
<p>Второй параграф.</p><!-- red -->
<p>Третий параграф.</p>

p:nth-of-type(3n) { background: red; }

<h1>Заголовок</h1>
<p>Параграф 1</p>
<p>Параграф 2</p>
<p>Параграф 3</p><!-- background: red -->
<p>Параграф 4</p>
<p>Параграф 5</p>
<p>Параграф 6</p><!-- background: red -->
<p>Параграф 7</p>
<p>Параграф 8</p>
<p>Параграф 9</p><!-- background: red -->

<h1>Заголовок</h1>
<p>Параграф 1</p><!-- background: red -->
<p>Параграф 2</p>
<p>Параграф 3</p>
<p>Параграф 4</p><!-- background: red -->
<p>Параграф 5</p>
<p>Параграф 6</p>
<p>Параграф 7</p><!-- background: red -->
<p>Параграф 8</p>
<p>Параграф 9</p>

#container div:first-child{ color:red; }

<div id="container">
<div>элемент 1</div><!-- color:red; -->
<div>элемент 2</div>
</div>

<div id="container">
<h1>Заголовок</h1>
<div>элемент 1</div><!-- не выделит -->
<div>элемент 2</div>
</div>

ul li:first-child { border-top: none; }

#container div:last-child{ color:red; }

<div id="container">
<div>элемент 1</div>
<div>элемент 2</div><!-- color:red; -->
</div>

<div id="container">
<div>элемент 1</div>
<div>элемент 2</div><!-- не выделит -->
<p>параграф</p>
</div>

ul > li:last-child { color: green; }

<ul>
<li>список 1</li>
<li>список 2</li>
<li>список 3</li><!-- color: green; -->
</ul>

#container div:first-of-type{ color:red; }

<div id="container">
<h1>Заголовок</h1>
<div>элемент 1</div><!-- color:red; -->
<div>элемент 2</div>
</div>

ul li:first-of-type { border-top: none; }

<ul>
<span>текст</span>
<li>элемент 1</li><!-- border-top: none; -->
<li>элемент 2</li>
<li>элемент 3</li>
</ul>

p:only-child { background: red; }

<div>
<p>параграф</p><!-- background: red; -->
</div>

<div>
<span>параграф</span><!-- не выберет, потому что X=p а не span -->
</div>

<div>
<p>текст</p><!-- не выберет, потому что на этом уровне 2 элемента -->
<span>параграф</span>
</div>

li:not(:only-of-type) {
font-size: 1.25em;
}

<ul>
<li></li><!-- не будет выбран -->
</ul>

<ul>
<li></li><!-- будет выбран -->
<li></li><!-- будет выбран -->
</ul>

p:only-of-type { background: red; }

<div>
<p>параграф</p><!-- background: red; -->
</div>

<div>
<span>параграф</span><!-- не выделится, потому что X=p а не span -->
</div>

<div>
<span>параграф</span>
<p>текст</p><!-- background: red; -->
</div>

ul > li:only-of-type { font-weight: bold; }

<div>
<p>параграф</p>
<ul>
<li>Список 1 </li>
<li>Список 2 </li>
</ul>

<ul>
<li>Список 3 </li>
<li>Список 4 </li>
</ul>
</div>

ul:first-of-type > li:nth-child(2) { font-weight: bold; }

p + ul li:last-child { font-weight: bold; }

ul:first-of-type li:nth-last-of-type(1) { font-weight: bold; }

ol li:nth-child(n+7):nth-child(-n+14) {
background: lightpink;
}