[CSS] Tag와 .class선택자 #id선택자 우선순위

봤던 링크를 회색으로 만들고 싶다면 HTML로

<a href="1.html" class="saw">
<a href="2.html" class="saw">

class="saw" 라는 속성을 넣어주고

 

saw라는 class값을 가지고 있는 모든 태그에 대해서 폰트 컬러를 그레이로 주는

.saw {

color:gray;

}

적용해준다.

.saw {
color:gray;
}

<a href="1.html" class="saw">
<a href="2.html" class="saw">

온점 . 을 붙이지 않으면 적용이 되지 않는다. 이유는 saw라고 쓰게되면 웹페이지에 모든 saw라는 이름의 태그를 선택하는 선택자이기 때문이다.

 

class = .

---

 

머물고 있는 페이지를 빨간색으로 이것만을 표시하고 싶다면

<a href="1.html" class="saw">
<a href="2.html" class="saw active">

class="saw active" 속성을 넣어주고

 

.active {

color:red;

}

적용해준다.

.active {
color:red;
}

<a href="1.html" class="saw">
<a href="2.html" class="saw active">

class라는 속성의 값은 여러개의 값 ex)saw,active이 들어올 수 있고 띄어쓰기로 구분한다.

하나의 태그(a)에는 여러개의 속성이 들어올 수 있고 여러개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다.

---

이 방법은 좋은방법이 아니다.

이 a태그는 2개의 class에 영향을 받고 있다.

.active{
color:red;
}

.saw {
color:gray;
}

<a href="1.html" class="saw">
<a href="2.html" class="saw active">

이렇게 된다면 코드와 보다 가까이에 있는 .saw 명령이 더 큰 영향력을 갖는다. 색상이 gray로 표시된다.

---

class보다 우선순위가 높은 선택자는 id 선택자다.

<a href="2.html" class="saw" id="active">

<a href="1.html" class="saw">
<a href="2.html" class="saw" id="active">

 

id = #

#active{
color:red;
}

.saw {
color:gray;
}

<a href="1.html" class="saw">
<a href="2.html" class="saw" id="active">

 

#active를 붙여주면 .saw보다 멀리있지만 우선순위가 된다.

id선택자와 class선택자가 붙으면 id선택자가 우선순위가 된다.

또한 class선택자와 tag(a)선택자가 붙으면 class선택자가 우선순위가 된다.

 

전부다 class 선택자라면 가장 가까이(마지막)있는 선택자가 우선순위가 된다.

tag - class - id

포괄적-구체

---

#active {
color:red;
}

.saw {
color:gray;
}

a{
color:black;
text-decoration: none;
}

<a href="1.html" class="saw">
<a href="2.html" class="saw" id="active">

1.html은 a태그가 가장 가깝지만 class선택자(.)가 있으므로 gray가 적용된다.

2.html은 가장 멀리있는 id선택자(#)가 가장 구체적으로 우선순위가 돼 red가 적용된다.

---

css selectors를 구글링하면 자세한 정보를 알 수 있다.