Руководство Основные CSS Selectors
View more Tutorials:
Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи.
Facebook
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 помогает вам выбрать элементы, основываясь на атрибуте или значении выданного атрибута.
