57 lines
1.6 KiB
Markdown
57 lines
1.6 KiB
Markdown
|
---
|
||
|
|
title: Class Selector
|
||
|
|
---
|
||
|
|
## Class Selector
|
||
|
|
A Class Selector is used in a CSS file to apply style to the HTML elements with the corresponding class name. In HTML, you can set the class name for any element by adding a "class" attribute.
|
||
|
|
|
||
|
|
To select elements with a specific class, we use a (.) named as period character, with the name of the class.
|
||
|
|
|
||
|
|
For example
|
||
|
|
.center {
|
||
|
|
text-align: center;
|
||
|
|
color: red;
|
||
|
|
}
|
||
|
|
|
||
|
|
Here, all HTML elements with `class="center"` will be red and center-aligned.
|
||
|
|
|
||
|
|
Examples:
|
||
|
|
```html
|
||
|
|
<h1 class="test">This is a heading 1</h1>
|
||
|
|
<p class="test">This is a paragraph 1</p>
|
||
|
|
<h2 class="test">This is a heading 2</h2>
|
||
|
|
<p class="test">This is a paragraph 2</p>
|
||
|
|
<div class="test2 test3">This is a div 1</div>
|
||
|
|
```
|
||
|
|
Since a class name is not unique, the HTML class attribute makes it possible to define equal styles for elements with the same class name. **Here is how you can select class in a CSS file to style elements (notice the . notation):**
|
||
|
|
|
||
|
|
**All elements of class `test` will be applied with this style:**
|
||
|
|
```css
|
||
|
|
.test {
|
||
|
|
color: green;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
**All `<p>` elements of class `test` will be applied with this style:**
|
||
|
|
```css
|
||
|
|
p.test {
|
||
|
|
border: 1px solid black;
|
||
|
|
color: red;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
**All `<h1>` and `<h2>` elements of class `test` will be applied with this style:**
|
||
|
|
```css
|
||
|
|
h1.test, h2.test {
|
||
|
|
color: blue;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
**All elements which have both class `test2` and `test3` will be applied with this style:**
|
||
|
|
```css
|
||
|
|
.test2.test3 {
|
||
|
|
color: green;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
**Tips: No space between multiple classes.**
|
||
|
|
#### More Information:
|
||
|
|
CSS Syntax and Selectors: <a href='https://www.w3schools.com/css/css_syntax.asp' target='_blank' rel='nofollow'>w3schools</a>
|
||
|
|
|
||
|
|
|