728x90
SMALL
#css
#css class selector
- A class selector selects elements that have a particular value as the value of their class attribute. Prefix the attribute value with . to indicate that it is a class.
- For example, the following will make elements with abc as the value of the class attribute red.
.abc {
color: red;
}If nothing precedes the class selector
- If nothing precedes the class selector, selects all elements with that value. That is, .abc is the same as *.abc and selects all of the following:
<h1 class="abc">Lorem</h1>
<p class="abc">Lorem</p>if there is anything before the class selector
- If there is anything before the class selector, it will select the element that satisfies all.
For example, the following selects p elements that have abc as their class value.
p.abc {}- Therefore, the following are not selected and
<h1 class="abc">Lorem</h1>- The following are selected:
<p class="abc">Lorem</p>When there are multiple values for the class attribute
- The class attribute can have multiple values.
<p class="abc xyz">Lorem</p>- In this case, they are applied in the order defined by CSS. For example, both paragraphs below are displayed in red: Because I defined .abc first and .xyz later in CSS.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
.abc {color: blue;}
.xyz {color: red;}
</style>
</head>
<body>
<p class="abc xyz">Lorem Ipsum Dolor.</p>
<p class="xyz abc">Lorem Ipsum Dolor.</p>
</body>
</html>728x90
LIST
'CSS' 카테고리의 다른 글
| [CSS] CSS / Child Selector (0) | 2022.08.14 |
|---|---|
| [CSS] CSS / Descendant Selector (0) | 2022.08.01 |
| [CSS] CSS / ID Selector (0) | 2022.07.29 |
| [CSS] CSS / Selector / Attribute Selector (0) | 2022.07.29 |
| [CSS] CSS / Selector / Type Selector (0) | 2022.07.29 |