<CSS 기초> 03. 가상클래스 셀렉터

 

 이번에 배울 Selector는 가상클래스이다.

1. Structural Pseudo-classes

 구조적인 가상클래스를 알아보기 위해 HTML문서에서 리스트를 작성했다고 가정해보자. 리스트는 li태그를 통해 여러개가 생성되어 있을 것이다. 하지만 이 중에서 특정 순번에만 스타일을 지정하고 싶다면 어떻게 해야할까? 일일이 거기에 클래스를 지정해야할까? 정답은 그렇지 않다 이다. 우리는 가상클래스를 통해 원하는 곳에 좀 더 편리하게 스타일을 적용할 수 있다.

li:first-child{
    color: red;
}
li:last-child{
    color: gray;
}
li:nth-child(2){
    color: blue;
}

  element:first-child 와 같은 구조를 통해 첫번째 요소에만 스타일을 적용할 수 있다. 이 때 콜론은 반드시 붙여서 써야한다. first-child외에도 last-child를 통해 마지막 요소에 스타일을 적용할 수도 있다. 이 가상클래스의 장점은 리스트가 추가로 생성되더라도 번거롭게 클래스를 다시 정할 필요없이 자동으로 첫번째와 마지막을 찾아서 스타일이 적용된다는 점이다.

 

 nth-child(n)을 통해서 원하는 순번에 스타일을 지정할 수도 있으며, 괄호안에 2n이나 2n-1을 넣어 짝수와 홀수번째를 지정할 수도 있다.

 

 

2. User Action Pseudo-classes

 이번에 배울 가상클래스는 유저의 액션에 반응하는 가상클래스 셀렉터이다. 사용법은 위와 비슷하다.

   element:hover 을 통해서 마우스를 특정 요소에 가져다 댔을 경우의 스타일을 적용할 수 있다.

   element:focus 를 통해서 눌러서 그 부분이 포커싱되었을 때의 스타일을 적용할 수 있다. 

   element:active 를 통해서 눌렀을 때의 순간에 적용되는 스타일을 작성할 수 있다.

 

 ※ 어떤 element의 after가상클래스에 스타일 적용시에는 element:hover::after 을 선언하여 적용할 수 있다

3. 셀렉터 우선순위

 지금까지 다양한 선택자들을 배웠다. 그렇다면 이 선택자가 겹치는 경우 어떤 식으로 스타일이 적용될까? 여기에는 우선순위에 따라 적용된다 가 정답이다. 

 

 기본적으로 같은 선택자가 겹치는 경우 CSS문서 상에서 아래쪽에 선언된 것이 위쪽에서 선언된 것을 덮는다. 컴퓨터가 순서대로 읽기 때문이다. 그 외에 우선순위는 다음과 같다.

 

 1순위 : ID

 2순위 : Class , Pseudo-class

 3순위 : Type

 

 하지만 이 순위도 무시하고 강력하게 스타일을 적용시키는 것이 두가지있다.

 첫번째는 Inline Style이다. 말그대로 HTML문서상에서 스타일을 작성하여 적용하면 이는 CSS에서 무슨 짓을 하더라도 덮을 수가 없다. 그렇기 때문에 앞선 장에서 언급했던대로 HTML에 스타일을 적용하는 것을 지양해야한다. 디버깅자체가 매우 힘들어진다.

 두번째는 !important이다. CSS에서 스타일을 적용하고 코드에 !important를 사용하면 가장 우선순위를 갖게된다.

 

 

 

---

 

 

 

참고

 

이 글은 구름에듀에서 관련 강의를 구매하여 수강 후 공부하며 작성한 글입니다.

모든 내용과 코드 및 이미지는 직접 재구성하였습니다.

 

 

김버그의 HTML&CSS는 재밌다 - 구름EDU