[CSS] 선택자

오늘은 CSS 선택자와 그 우선순위에 대해 정리해보고자 한다.

아는 것들만 쓰게 되지만 다시 한번 정리하는 차원에서 자세히 뜯어보고자 한다.

먼저 CSS 선택자는 인라인 CSS > 외부 > 내부 순으로 적용된다.

존재하는 모든 선택자들을 테이블로 정리하면 다음과 같다.

 

선택자	문법	설명
아이디	#id	- 중첩 사용 가능 - 문서 스타일이나 자바스크립트 선택자 사용할 때 대체로 사용
클래스	.class	- 섹터 구분할 때 주로 사용 - 중첩 사용 가능 - a 태그를 활용하여 특정 id 로 이동 가능
하위선택자	section ul {}	- 태그 안의 태그를 선택할 때 사용
자식선택자	section > ul {}	- 부모 요소의 자식 요소를 선택
인접 형제 선택자	h1 + ul {}	- 앞 태그 직후 나오는 태그를 선택
일반 형제 선택자	h1 ~ ul {}	- 앞 태그 이후 나오는 모든 태그 선택
가상 클래스	.class:first-child .class:last-child .class:nth-child (n) .class:nth-child(odd) .class:nth-child(even) .class:nth-child(3n+1)	- 존재하지 않는 클래스이나 클래스 처럼 동작 - 명시한 클래스의 첫번째, 두번째... 등등 지정해 줄 수 있음
가상 요소	.class::after, .class::before	- 콜론이 두개이며, 중요치 않은 요소를 추가할 때 주로 사용한다 (ex. 구분선, 버튼 내 아이콘 등)
속성 선택자	a[href] {}	- 해당 속성을 가진 모든 태그 선택
속성+변수 선택자	a[href="apple"] {}	- 해당 속성과 변수와 일치하는 태그 선택
속성+변수 선택자(단어포함)	a[href~="apple"] {}	- 변수를 포함한 태그 선택
속성+변수 선택자(시작)	a[href^="http"] {}	- 변수로 시작하는 태그 선택
속성+변수 선택자(끝)	a[href$="apple"]{}	- 변수로 끝나는 태그 선택
속성+변수 선택자(문자열 포함)	a[href*="boxof"] {}	- 변수를 포함하는 문자열 태그 선택

위의 많은 선택자들 중 가장 많이 쓰게 되는 것들은 보라색으로 표기해 둔 친구들이다. 조금 더 자세히 알아보자.

class, id 선택자

    <section class="container">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      <ul/>
    <section/>
    <section id="container">
    <section/>

      .container {
        background: black; 
      }
      #container {
        background: black; 
      }

위 코드와 같이 외부 CSS 파일과 연결하여 해당 클래스 또는 아이디에 접근하여 스타일링을 줄 수 있다.

 

하위 선택자, 자식 선택자

      section ul {
        color: red; 
      } 
      ul > li {
        color: pink; 
      }

ul태그의 자식 선택자의 경우, 해당 태그 아래의 li 태그가 모두 선택되어 스타일이 적용된다.

 

가상 클래스, 가상요소

가상클래스의 경우, 상단 HTML 코드를 기반으로 선택자를 적용해보았다.

    li:first-child {
        color: blue; 
    } 
    li:nth-child(2) {
        color: black; 
    } 

총 4개의 li중 first-child가 적용된 첫번째 li의 텍스트 색이 파란색으로 적용된다.
nth-child(2)의 경우, 검정색이 적용된다.

    li:first-child::after {
        content: "애프터"; 
          color: red; 
    }  

가상요소로 after 또는 before를 주려면 content를 꼭 지정해주어야 한다.

 

선택자간 우선순위

클래스 아이디.. 가상요소 등등 다양한 선택자들이 존재하는데 이들 가운데 CSS 가 적용되는 우선순위가 있다.

기본적으로는 인라인 CSS, 외부 CSS, 내부 CSS 순으로 적용되며,
class, id, tag 를 사용할 때 부여되는 CSS 점수에 따라 적용된다. 순위는 다음과 같다.

 

!important(무조건 1순위) > 인라인 CSS (1000점) > id(100점) > class(10점) > tag(1점)

 

위의 순으로 적용되니, 꼭꼭 고려하여 마크업, 스타일링을 하면 좋다 :)