The 30 CSS Selectors You Must Memorize
The 30 CSS Selectors You Must Memorize
Learn CSS: The Complete GuideWe've built a complete guide to help you learn CSS, whether you're just getting started with the basics or you want to explore more advanced CSS.CSS SelectorsSo you...
code.tutsplus.com
css
body{
background: orange;
}
li{
border: 2px solid red
}
#special{
background:white;
}
.completed{
text-decoration: line-through;
}html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Todo List</title>
<link rel="stylesheet" href="todos.css" type="text/css">
</head>
<body>
<h1>Todo List</h1>
<ul>
<li class="completed">
<input type="checkbox" checked/>
Walk Rusty
</li>
<li class="completed">
<input type="checkbox" />
Buy Groceries
</li>
<li id="special">
<input type="checkbox" />
Finish Recording CSS Videos
</li>
</ul>
</body>
</html>중요한 태그 8개
- 요소
- 클래스
- id
- *
- descendent(자손) 선택자
- 인접 선택자
- 속성 선택자
- n th 선택자
/* Element */
li{
}
/* class */
.hello{
}
/* id */
#name{
}
/* Star */
*{
border : 1px solid lightblue
}
/* Descendant Selector */
li a{
color: red;
}
/* Adjacent Selector */
/* h4 바로 다음에 오는 ul태그들에 대해 지정함 */
h4 + ul{
border: 4px solid red;
}
/* Attribute Selector */
/* 태그의 속성까지 접근 가능하도록한다 */
a[href="http://www.google.com"]{
background: blue;
}
input[type="checkbox"]{
background: blue;
}
/* nth of type */
/*어떤 선택자 내의 n번째 요소를 선택한다. */
/* ()내에 even을 넣을 경우 짝수번째만 선택가능 */
ul:nth-of-type(3){
background: purple;
}실행화면
'IT > WEB' 카테고리의 다른 글
| [CSS] Image 갤러리 만들기 실습 (0) | 2020.10.07 |
|---|---|
| [CSS]Box Model,실습 (1) | 2020.10.07 |
| [HTML] 간단한 회원가입 양식 만들기 (0) | 2020.10.06 |
| JDBC 정리 및 실습 코드 (1) | 2020.05.22 |
| Maven 개념 (0) | 2020.05.22 |
