<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Select</title>
<style>
/*전체 아이디 클래스, 태그 선택자*/
*{margin : 5px; padding : 5px;}
#id1{border :dashed red;}
.class2{border: dotted blue; color : purple;}
span{font-weight: bold;}
/*자식, 자손 선택자*/
#id1 > span{color: green;}
#id2 span{color : deeppink;}
#id1>ul>li{color:blue;}
#id1>ul li{background-color: yellow;}
#id1 li {border:double;}
#id2>.class2>h3{color: red;}
#id2>.class2 h4{color:orange;}
/*형제 선택자*/
h3 + h4{text-align:center;}
h3~h4{background-color: gray;}
#id2 >.class2 h4~h4{border:double;}
</style>
</head>
<body>
<div id ="id1">div style1
<span>span style1</span>
<span>span style2</span>
<p>p style1
<span>span style3</span>
</p>
<ul vlsdd="class2">
<li>sky</li>
<li>sea</li>
</ul>
</div>
<div id="id2">div style2
<span>span style 4</span>
<span>span style 5</span>
<p>p style
<span>span style 6</span>
</p>
<div class="class2">
<h4>tree1</h4>
<h3>tree2</h3>
<h4>tree3</h4>
<h5>tree4</h5>
<h4>tree5</h4>
</div>
</div>
</body>
</html>#### CSS Style Rules Explained:
- `*{margin: 5px; padding: 5px;}`: The universal selector (`*`) applies a margin and padding of 5px to every element in the document.
- `#id1{border: dashed red;}`: The ID selector (`#id1`) styles any element with `id="id1"` to have a red dashed border.
- `.class2{border: dotted blue; color: purple;}`: The class selector (`.class2`) applies a blue dotted border and purple text color to elements with `class="class2"`.
- `span{font-weight: bold;}`: The type selector (`span`) makes the text of all `<span>` elements bold.
#### Child and Descendant Selectors:
- `#id1 > span{color: green;}`: Styles `<span>` elements that are direct children of an element with `id="id1"` to have green text.
- `#id2 span{color: deeppink;}`: Styles all `<span>` elements inside an element with `id="id2"` with deep pink text, regardless of their nesting level.
- `#id1 > ul > li{color: blue;}`: Targets `<li>` elements that are direct children of a `<ul>` that is a direct child of `#id1`, coloring the text blue.
- `#id1 > ul li{background-color: yellow;}`: Applies a yellow background to `<li>` elements within a `<ul>` that is a direct child of `#id1`, including deeper nested `<li>` elements.
- `#id1 li {border: double;}`: Adds a double border to all `<li>` elements within `#id1`.
#### More Complex Selectors:
- `#id2 > .class2 > h3{color: red;}`: Styles `<h3>` elements that are direct children of an element with `class="class2"`, which is a direct child of `#id2`, to have red text.
- `#id2 > .class2 h4{color: orange;}`: Applies orange text to `<h4>` elements within any `.class2` that is a direct child of `#id2`.
- `h3 + h4{text-align: center;}`: Centers text of an `<h4>` that is immediately preceded by an `<h3>`.
- `h3 ~ h4{background-color: gray;}`: Styles `<h4>` elements that are siblings following an `<h3>` with a gray background.
- `#id2 > .class2 h4 ~ h4{border: double;}`: Applies a double border to `<h4>` elements that are subsequent siblings of an `<h4>` within `.class2` that is a direct child of `#id2`.
#### HTML Structure:
The HTML structure includes two main `<div>` elements with IDs `id1` and `id2`, showcasing different combinations of nested elements such as `<span>`, `<p>`, `<ul>`, `<li>`, and heading tags (`<h3>`, `<h4>`, `<h5>`). The document's styling demonstrates how CSS selectors can be used to target and style elements based on their relationships and attributes in a nuanced and specific manner, offering a practical example of CSS's powerful selection capabilities.
'개념 > HTML+CSS' 카테고리의 다른 글
| HTML) Styling HTML Headings with CSS (0) | 2025.02.06 |
|---|---|
| HTML) Exploring Font Styles and Effects in CSS (0) | 2025.02.04 |
| HTML) background style type (0) | 2025.02.03 |
| HTML) CSS Styling Showcase (0) | 2025.02.02 |
| HTML) Web font (0) | 2025.02.01 |