CSS 선택자를 알아내는 방법 (selector)

https://opentutorials.org/course/3086/18329

Selector

 

ex quest) 

• 링크:  검정색
• 방문한 적 있는 링크 : 회색
• 현재 링크(페이지) : 빨간색

 

<a>태그에 클래스 지정하기

  - 방문한 적있는 링크 : saw

  - 현재 패이지 : active

<a href="address1.html" class ="saw">visited page</a>
<a href="address2.html" class ="saw active">visited and current page</a>

 

- 클래스에 CSS 입히기

.클래스명{
   속성
}

a{
	color:black;
	text-decoration: none;
}
.saw{
	color:gray;
}
.active{
	color:red;
}

 

 

: 좋은 코드가 아님!

   'active'가 앞에있다면 'saw' 클래스 속성을 따름

 

 ->  'id' 지정하기! 

- 현재 페이지(active) 를 id로 지정하기 

<a href="address1.html" class ="saw">visited page</a>
<a href="address2.html" class ="saw" id= "active">visited and current page</a>

#active{
	color:red;
}
.saw{
	color:gray;
}
a{
	color:black;
	text-decoration: none;
}

 

# 선택자의 우선순위 -> 구체적인 순서

id ( #) > class ( .) > tag

- 같은 선택자라면, 가장 마지막에 정의 된 것으로 표시!

- 국룰)  id 선택자는 한 번만 사용하기 : 하나의 객체에만 사용. 중복 항목이 있으면 안됨!

 

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

CSS Selectors Reference