. p { }
<p class="test" >
.test {}
<p id= "test" >
# id {}
* 모든것을 포함
선택자 + " " + 선택자
<div class="test">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea molestias atque cumque? Mollitia omnis ducimus esse, inventore incidunt quasi a repellendus in fugiat at iste magnam id sed, ipsam laboriosam!</p>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos minima fuga quae laborum vel impedit. Optio harum pariatur, dicta eos a nobis eum deleniti placeat vel officiis labore unde soluta.</p>
<style>
.test p{
color: red;
}
선택자: .test (공백) p
선택자 "+" + 선택자 ->선택자 바로 뒤에 있는 선택자를 선택
<div class="test">
<p class="panda">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea molestias atque cumque? Mollitia omnis ducimus esse, inventore incidunt quasi a repellendus in fugiat at iste magnam id sed, ipsam laboriosam!</p>
</div>
<p class="panda">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos minima fuga quae laborum vel impedit. Optio harum pariatur, dicta eos a nobis eum deleniti placeat vel officiis labore unde soluta.</p>
<style>
.test+.panda {
color: red;
}
[ ] 속성 선택자
<style>
a[title] {
color: red;
}
</style>
</head>
<body>
<a href="" title="naver">네이버</a>
<a href="">구글</a>
</body>
</html>
<style>
a[title="naver"] {
color: red;
}
</style>
</head>
<body>
<a href="" title="naver">네이버</a>
<a href="" title="google">구글</a>
