Руководство Основные CSS Selectors
View more Tutorials:
CSS Selector используется для поиска (или выбора) элементов в HTML докумене, чтобы применить к ним стиль (style).
Простой пример:
/** Select all elements with class contains abc */ .abc /** Select element with ID = abc */ #abc
CSS Selectors разделен на 3 следующие виды:
Basic Selectors
Базовые Selector помогают вам выбрать элементы, основываясь на его Name, ID, Class или Attribute.
Базовые Selector будут упомянуты в данной статье.
Combining selectors
Выбрать элементы, основываясь на отношении между ними.
Combinator | Syntax | Example |
Descendant combinator | A B |
div span div .item |
Child combinator | A > B |
ul > li |
General sibling combinator | A ~ B |
p ~ span |
Adjacent sibling combinator | A + B |
h2 + p |
Column combinator | A || B |
col || td |
Pseudo selectors
Pseudo | Syntax | Example |
Pseudo classes | A:B |
a:visited |
Pseudo elements | A::B |
p::first-line |
- TODO Link!
Universal selector (Универсальный селектор): Выбирает все элементы или все элементы namespace (пространство имен).
Синтаксис:
Selector | Описание |
* | Выбрать все элементы. |
*|* | Выбрать все элементы. |
ns|* | Выбрать все элементы в пространстве имен ns. |
|* | Выбрать все элементы необъявленные в пространстве имен. |
Например выбрать все элементы и настроить для них границы зеленого цвета.

universal-selector-example1.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Universal Selector: *</title> <style> * { border: 1px solid green; margin: 5px; } </style> </head> <body> <h1>I am H1 element</h1> <div>I am div element</div> <p>I am P element</div> </body> </html>
CSS Type Selector помогает вам найти элементы по имени.
Например, выбрать все элементы <div>:
div { color: red; }
Например, выбрать все элементы <span>:
type-selector-example1.css
span { background-color: skyblue; }
type-selector-example1.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Universal Selector: ns|*</title> <link rel="stylesheet" type="text/css" href="type-selector-example1.css" /> </head> <body> <span>I am span element</span> <p>I am P element</p> <span>I am span element</span> </body> </html>
Если CSS Selector имеют одинаковое правило, можно их написать вкратце, CSS Selector будут разделены запятой и использовать одно и то же правило.
type-selector-example2.css
/** Select H1 or H2 */ h1, h2 { color: blue; }
type-selector-example2.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Type Selector</title> <link rel="stylesheet" type="text/css" href="type-selector-example2.css" /> </head> <body> <h1>I am H1 element</h1> <h2>I am H2 element</h2> <h3>I am H3 element</h3> </body> </html>
CSS Class Selector выбирает элементы, основываясь на значении атрибута (attribute) class.
Например, выбрать все элементы с class = "txt-green" или включая слово "txt-green".
class-selector-example1.css
.txt-green { color: green; } .bg-yellow { background-color: yellow; }
class-selector-example1.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Class Selector</title> <link rel="stylesheet" type="text/css" href="class-selector-example1.css" /> </head> <body> <h1 class ="txt-green">I am H1 with class = 'txt-green'</h1> <p>I am P element</p> <h2 class="txt-green bg-yellow">I am H2 with class = 'txt-green bg-yellow'</h2> </body> </html>
Пример:
class-selector-example2.css
/* <p> with class 'txt-green' or includes 'text-green' */ p.txt-green { color: green; } .bg-yellow { background-color: yellow; } /* <div> with class inculudes both 'text-green' and 'bg-yellow' */ div.txt-green.bg-yellow { color: green; font-style: italic; }
class-selector-example2.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Class Selector</title> <link rel="stylesheet" type="text/css" href="class-selector-example2.css" /> </head> <body> <h1 class ="txt-green">I am H1 with class = 'txt-green'</h1> <p class ="txt-green">I am P element with class='txt-green'</p> <div class="txt-green bg-yellow">I am DIV with class = 'txt-green bg-yellow'</div> <br/> <span class="txt-green bg-yellow">I am SPAN with class = 'txt-green bg-yellow'</span> </body> </html>
CSS ID Selector помогает вам выбрать элементы основываясь на значении атрибута (attribute) ID, значение атрибута ID должно полностью совпадать со значением, данным Selector. Примечание: CSS ID Selector "не различает прописные и строчные буквы" (Case insensitive)
id-selector-example.css
#demo { color: blue; font-size: 30px; }
id-selector-example.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>ID Selector</title> <link rel="stylesheet" type="text/css" href="id-selector-example.css" /> </head> <body> <h1 id = "demo">Demo</h1> <span>I am span element</span> <p>I am P element</p> </body> </html>
CSS Attribute Selector помогает вам выбрать элементы, основываясь на атрибуте или значении выданного атрибута.