7. CSS 선택자의 기본

1. 선택자로 CLASS를 사용 : .class이름

ex) 틀린 예 - 적용 안됨

<style>
	saw{	/!--saw 라는 태그를 선택--!/
    ....
    }
</style>

<li><class = "saw"> HTML </li>
<li><class = "saw"> CSS </li>

ex) 올바른 예

<style>
	.saw{		<!-- class가 saw인 태그를 선택 --!>
    ....
    }
</style>

<li><class = "saw"> HTML </li>
<li><class = "saw"> CSS </li>

 

 

2. class 를 여러개 설정, 제어 가능

ex)

class = " saw active"

.active{

}

.saw{

}

=>saw선택자의 property 적용

 

단, 명령의 순서에 따라서 적용이 다르게 됨.

 

3. ID 사용 : #id이름

ex)

class = " saw" id="active"

#active{

}

.saw{

}

=>active선택자의 property 적용

※선택자 우선 순위 : id>class>tag | 같은 선택자 유형은 가장 마지막이 적용

★id는 페이지 내에서 한번만 사용 가능함★

ex)
<!--가능--!>
<style>
	.a{
    }

<p><class = "a">Hi</p>
<p><class = "a">Hello</p>

<!--불가능--!>
<p><id = "a">Hi</p>
<p><id = "a">Hello</p>

<!--가능--!>
<p><id = "a">Hi</p>
<p><id = "b">Hello</p>

 

|CSS Selectors|

https://www.w3schools.com/cssref/css_selectors.php