Селектор класса в CSS позволяет выбрать элемент (или несколько элементов) на основе определенного атрибута класса. Он выбирает элементы, значение атрибута класса которых совпадает с указанным в селекторе класса.
Например, класс selector.side { color: green; } применит один и тот же стиль ко всем элементам, значение атрибута класса которых равно «side».
Селектор класса полезен в CSS, когда вы хотите применить единообразный стиль к различным элементам на веб-странице или оформить определенные элементы иначе, чем связанные с ними элементы, не затрагивая при этом другие элементы.
Например, если вы хотите добавить отступ к одному элементу абзаца, не затрагивая другие элементы абзаца, вы можете использовать селектор класса с этим абзацем.
Синтаксис для определения селектора класса CSS
Чтобы выбрать элементы с определенным атрибутом класса в HTML-документе, сначала необходимо создать селектор класса CSS в таблице стилей, а затем применить его к элементам HTML, используя атрибут класса.
Чтобы создать селектор класса, начните с символа точки (.), затем укажите имя класса, а затем напишите правило стиля в открывающих и закрывающих фигурных скобках.
Общий синтаксис определения селектора класса в таблице стилей прост и понятен:
.classname {
property1: value1;
property2: value2;
/* More properties and values */}В приведенном выше синтаксисе точка (.) указывает на то, что вы определяете селектор класса. Имя класса указывает имя класса, который вы хотите выбрать. По сути, это значение атрибута класса, которое не может начинаться с цифры. Имя класса должно состоять только из букв, цифр и дефисов, чтобы обеспечить наилучшую совместимость со старыми веб-браузерами. Оно не может содержать пробелы.
В HTML вы применяете этот селектор класса к элементу HTML, используя атрибут class следующим образом:
<div class="classname">Content goes here</div>
Помните, что вам не нужно ставить точку в значении атрибута класса. Фактически, этого не может произойти, поскольку значение атрибута класса ссылается на само имя класса.
Давайте рассмотрим пример, в котором мы определим селектор имени класса, а затем применим его к элементу HTML.
Пример 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of Creating CSS Class Selector</title>
<style>
/* Creating a class selector */.para {
color: white;
background-color: red;
padding: 20px;
border: 2px solid black;
}
</style>
</head>
<body>
<!--Applying class selector to an HTML element p-->
<p class="para">This is a paragraph whose background color is red and text color is white.</p>
</body>
</html>
В этом примере мы определили селектор имени класса «.para» внутри таблицы стилей, которая начинается с точки, за которой следует само имя класса «para». Затем мы применили этот селектор имени класса для стилизации элемента HTML <p> с использованием значения атрибута класса «para».
Стилизация определенного элемента с определенным именем класса
В CSS вы можете использовать селектор класса для нацеливания на определенный элемент на веб-странице, который имеет определенное значение атрибута класса. Это полезно, когда мы хотим применить стили к определенному элементу, не затрагивая другие элементы на странице, которые могут иметь другие имена классов.
Пример 2:
<!DOCTYPE html>
<html>
<head>
<title>Applying Style Rule to a Specific Element</title>
<style>
/* Applying style rule to a specific element p whose class attribute value is text2. */.text2 {
color: white;
background-color: green;
border: 1px solid blue;
padding: 10px;
}
</style>
</head>
<body>
<div class="text1">This is a box</div>
<p class="text2">This is a paragraph</p>
<span class="text3">This is a span</span>
</body>
</html>
В этом примере.text2 { } — селектор, который нацеливается на элемент <p>, атрибут class которого имеет значение text2. Вы также можете создать селектор для нацеливания на элемент p следующим образом:
p.text2 {
color: white;
background-color: green;
border: 1px solid blue;
padding: 10px;
}Применение нескольких классов CSS к элементу HTML
В CSS мы можем применить несколько классов к элементу HTML, разделив их пробелом. Давайте разберем эту концепцию на примере.
Пример 3:
<!DOCTYPE html>
<html>
<head>
<title>Multiple Class Selectors Example</title>
<style>
/* Creating multiple class selectors */.class1 {
color: white;
background-color: red;
}
.class2 {
border: 2px solid black;
}
.class3 {
padding: 20px;
}
</style>
</head>
<body>
<!--Applying multiple class selectors to an HTML element div -->
<div class="class1 class2 class3">This div element is styled with three class selectors.</div>
</body>
</html>
Как вы можете видеть в приведенном выше примере кода, мы присвоили три имени класса атрибуту class внутри открывающего тега элемента <div>. Например, class=»class1 class2 class3″. Значение этого атрибута class фактически содержит три имени класса: class1, class2 и class3.
Мы разделили каждое имя класса пробелом в атрибуте. В таблице стилей три класса содержат три отдельных правила стиля, которые были применены к элементу HTML div, как показано в приведенном выше примере кода.
Применение селектора классов CSS к различным типам элементов
CSS также позволяет применять один и тот же класс к разным типам элементов. В этом случае тип элемента не имеет значения. Давайте разберемся с этим на примере.
Пример 4:
<!DOCTYPE html>
<html>
<head>
<title>Applying Same Class Selector to Different Elements</title>
<style>
/* Creating class selectors */.class1 {
color: white;
background-color: green;
border: 2px solid black;
padding: 20px;
margin: 10px;
display: block;
}
</style>
</head>
<body>
<!--Applying same CSS class selector to different types of HTML elements -->
<div class="class1">This is a div styled with class1 selector.</div>
<p class="class1">This is a paragraph styled with class1 selector.</p>
<span class="class1">This is a span element that is styled with class1 selector.</span>
</body>
</html>
Выход:
Как вы можете видеть в этом примере кода, мы применили один и тот же класс к разным типам элементов, таким как div, p и span. Здесь по умолчанию div и p являются элементами уровня блока, которые более естественно учитывают значение margin.
Однако span — это встроенный элемент, который не учитывает значение margin так же, как элементы уровня блока. Чтобы применять значение margin последовательно ко всем элементам, мы установили свойство display на block для элемента span внутри класса.
Пример 5:
<!DOCTYPE html>
<html>
<head>
<title>Applying Class Selectors to different Elements</title>
<style>
.class1 {
color: white;
}
.class2 {
font-size: 25px;
}
.class3 {
background-color: green;
}
}
</style>
</head>
<body>
<!--Applying same CSS class selector to different types of HTML elements -->
<div class="class1 class2">This div has white text and a font size of 25px.</div>
<p class="class1 class3">This paragraph has white text and a green background.</p>
<span class="class2 class3">This span has a font size of 25px and a green background.</span>
</body>
</html>
В этом примере элемент <div> стилизован с помощью двух селекторов классов, таких как class1 и class2, что делает текст белым и устанавливает размер шрифта на 25 пикселей. Элемент <p> (абзац) стилизован с помощью двух селекторов классов, таких как class1 и class3, что делает текст белым, а фон зеленым. Элемент <span> стилизован с помощью двух классов, таких как class2 и class3, что устанавливает размер шрифта на 25 пикселей, а фон зеленым.
Вложенные классы в CSS
Вложенный селектор класса в CSS — это селектор, который представляет собой комбинацию из двух или более имен классов для нацеливания элементов, принадлежащих обоим классам. Это позволяет нацеливать определенные элементы, к которым применено несколько классов.
Взгляните на простой пример кода вложенных селекторов классов в CSS ниже:
Пример 6:
<!DOCTYPE html>
<html>
<head>
<title>Nested Classes Example</title>
<style>
/* Parent class */.parent {
background-color: lightgrey;
padding: 20px;
}
/* Nested class */.parent.child {
color: white;
background-color: blue;
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<!-- Parent element with nested child elements -->
<div class="parent">
This is the parent div.
<div class="child">This is a child div within the parent.</div>
<div class="child">This is another child div within the parent.</div>
</div>
</body>
</html>В этом примере мы создали два селектора классов:.parent и.parent.child. Первый селектор применит правила стиля для элемента, имеющего атрибут class со значением parent.
Второй selector.parent.child применяет стили к любому элементу со значением атрибута класса child, который является потомком элемента со значением атрибута класса parent.
Примечание: В селекторе CSS есть пробел между.class1 и.class2, который обозначает отношение потомка. Пробел между.parent и.child важен, поскольку он указывает, что child является вложенным элементом в parent.
Если вы не предоставите пространство,.parent.child будет нацелен на элементы, к которым одновременно применены как родительские, так и дочерние классы, что отличается от нацеливания на дочерние элементы внутри родительских элементов.
Псевдоклассы с классом CSS
CSS позволяет нам комбинировать псевдоклассы с классами для применения стилей в определенных условиях, например, когда:
- на элемент наведен курсор.
- ссылка посещена.
- поле ввода находится в фокусе.
Базовый синтаксис для псевдокласса, объединенного с классом, выглядит следующим образом:
.classname:pseudo-class {
/* styles */}Давайте рассмотрим несколько важных примеров на этой основе.
Пример 7:
<!DOCTYPE html>
<html>
<head>
<title>Hover Example</title>
<style>
.button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
.button:hover {
background-color: darkblue;
}
</style>
</head>
<body>
<button class="button">Hover over me</button>
</body>
</html>
В этом примере мы объединили селектор класса button с псевдоклассом:hover. Псевдокласс:hover применяет стили, когда пользователь наводит курсор на элемент. При наведении курсора на элемент button с классом button его фоновый цвет меняется с синего на темно-синий.
Пример 8:
<!DOCTYPE html>
<html>
<head>
<title>Focus Example</title>
<style>
.input-field {
padding: 10px;
border: 2px solid grey;
}
.input-field:focus {
border-color: blue;
outline: none;
}
</style>
</head>
<body>
<input type="text" class="input-field" placeholder="Focus on me">
</body>
</html>
В этом примере мы объединили CSS-класс selector.input-field с псевдоклассом:focus. Псевдокласс:focus применяет стили, когда пользователь нажимает на элемент, например, на поле ввода.
Пример 9:
<!DOCTYPE html>
<html>
<head>
<title>Nth-Child Example</title>
<style>
.list-item {
padding: 10px;
background-color: lightgrey;
}
.list-item:nth-child(odd) {
background-color: grey;
}
.list-item:nth-child(even) {
background-color: white;
}
</style>
</head>
<body>
<ul>
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
<li class="list-item">Item 3</li>
<li class="list-item">Item 4</li>
<li class="list-item">Item 5</li>
</ul>
</body>
</html>
В этом примере мы объединили класс selector.list-item с псевдоклассом:nth-child. Псевдокласс:nth-child применит стили к элементам на основе их положения в родительском элементе. Элементы списка с классом list-item будут стилизоваться по-разному в зависимости от того, находятся ли они в нечетном или четном положении в родительском элементе ul.
Пример 10:
<!DOCTYPE html>
<html>
<head>
<title>Link Example</title>
<style>
.link {
color: blue;
text-decoration: none;
}
.link:visited {
color: purple;
}
.link:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<a href="https://www.scientecheasy.com" class="link">Visit Scientech Easy for Latest Tutorials</a>
</body>
</html>
В этом примере мы объединили CSS-класс selector.link с псевдоклассами:visited и:link. Псевдоклассы:visited и:link применяют стили к ссылкам на основе их посещенного состояния.
Пример 11:
<!DOCTYPE html>
<html>
<head>
<title>Disabled Example</title>
<style>
.input-field {
padding: 10px;
border: 2px solid grey;
}
.input-field:disabled {
background-color: lightgrey;
border-color: darkgrey;
}
</style>
</head>
<body>
<input type="text" class="input-field" value="Can't edit me" disabled>
</body>
</html>
В этом уроке вы узнали о селекторе классов CSS, который можно повторно использовать в нескольких элементах, чтобы применять одни и те же стили одновременно. Надеюсь, вы поняли базовый синтаксис для создания селектора классов и попрактиковались во всех примерах.
