https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
The 30 CSS Selectors You Must Memorize
* 전체 다 선택하기
1 2 3 4 | * { margin: 0; padding: 0;} |
ul안에 있는 li안에있는 a(anchor태그) 만 적용시키기
1 2 3 4 | ul li a { border: 1px solid lightgrey;} |
adjacent
1 2 3 | ul + p { color: red;} |
This is referred to as an adjacent selector. It will select only the element that is immediately preceded by the former element. In this case, only the first paragraph after each ul will have red text.
html
<!DOCTYPE html>
<html>
<head>
<title>Selectors Demo</title>
<link rel="stylesheet" type="text/css" href="47.selectors.css">
</head>
<body>
<h1>Selector Demo</h1>
<a href="http://www.google.com">Click Me For Google</a>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
<h3>outright</h3>
<ol>
<li>Maandag</li>
<li>Dinsdag</li>
<li>Woensdag</li>
<li>Danderdag</li>
<li>Vrijdag</li>
<li>Zaterdag</li>
<li>Zondag</li>
</ol>
<h4>Popular Sites</h4>
<ul>
<li>Carrots</li>
<li>Peas</li>
<li>Asparagus</li>
<li>Carrots</li>
<li>Peas</li>
<li>Asparagus</li>
<li>Carrots</li>
<li>Peas</li>
<li>Asparagus</li>
</ul>
<h4>Popular Sites</h4>
<ol>
<li>een</li>
<li>twee</li>
<li>drie</li>
<li>vier</li>
<li>vilf</li>
</ol>
<ul>
<li>
<a href="http://www.google.com">Google</a>
</li>
<li>
<a href="http://www.facebook.com">Facebook</a>
</li>
<li>
<a href="http://www.reddit.com">Reddit</a>
</li>
</ul>
<ol>
<li>zes</li>
<li>zeven</li>
<li>acht</li>
<li>negen</li>
<li>tien</li>
</ol>
</body>
</html>
css
li a{
color:red;
}
h3+ol{
border: 4px solid red;
}
a[href="http://www.google.com"] {
background: greenyellow;
}
/* ul덩어리 중 3번째 덩어리 */
ul:nth-of-type(3){
background: pink;
}
ol:nth-of-type(2){
background: lightgreen;
}
/* 각 덩어리안의 리스트 중 4번째 li들만 */
li:nth-of-type(4){
border: dashed blueviolet 3px;
}
구현화면
