[CSS] CSS 선택자

이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다.

---

기본 선택자 사용

전체 선택자

전체 선택자는 HTML에서 사용할 수 있는 모든 요소를 한 번에 선택자로 지정하는 방법으로, * 기호를 사용해 표시한다.

<style>
    *{
        color:red;
    }
</style>
<h1>전체 선택자</h1>
<p>전체 선택자는 모든 요소를 한 번에 선택할 수 있다.</p>

 

태그 선택자

태그 선택자는 HTML 태그명으로 선택자를 지정하는 방법이다.

태그 선택자는 선택자에 지정된 태그명과 일치하는 모든 요소를 한 번에 선택한다.

<style>
    p{
        color:red; /*텍스트 색상을 빨강으로 변경*/
    }
</style>
<h1>안녕</h1>
<p>하이 안녕 안녕</p>

 

아이디 선택자

아이디 선택자는 HTML 태그에서 사용할 수 있는 id 속성 값을 이용해 선택자를 지정하는 방법이다.

이때 속성값 앞에는 # 기호를 붙여 구분한다.

<style>
    #title{
        color:red; /*텍스트 색상을 빨강으로 변경*/
    }
</style>
<h1 id="title">안녕</h1>

id 속성값은 고유해야 한다.
HTML에서 id 속성값은 하나의 HTML 문서 안에서 고유한 값이어야 한다.

 

클래스 선택자

클래스 선택자는 HTML 태그에서 사용할 수 있는 class 속성값을 이용해 선택자를 지정하는 방법이다.

이때 속성값 앞에 . 기호를 붙인다.

클래스 선택자는 실무에서 가장 많이 사용하는 선택자 지정 방법이다.

class 속성은 id 속성과 다르게 속성 값을 중복해서 사용할 수 있어서 하나의 클래스 스타일을 잘 정의하면 여러 곳에서 사용할 수 있다.

<style>
    .red{
      color:red;
    }
    .blue{
      color:blue;
    }
  </style>
  <h1 class="red">클래스 선택자</h1>
<p class="blue">class 속성값으로 선택자를 지정합니다.</p>
<p class="blue">class 속성은 id 속성과는 다르게 속성값을 중복해서 사용할 수 있습니다.</p>

 

기본 속성 선택자

속성 선택자는 HTML 태그에서 사용할 수 있는 속성과 값을 사용해 선택자를 지정하는 방법이다.

/*형식*/
[속성]{/* CSS 코드*/}
[속성=값]{/* CSS 코드*/}

 

방식 1

 

<style>
    a[href]{
      color:red;
      display:block; /* a 태그를 block-level 요소로 지정 */
    }
  </style>
<a href="#">기본 a 태그</a>
<a href="#" target="_blank">새 창으로 열리는 a 태그</a>

방식 2

<style>
    a[target="_blank"]{
      color:red;
      display:block; /* a 태그를 block-level 요소로 지정 */
    }
</style>
<a href="#dd">기본 a 태그</a>
<a href="#" target="_blank">새 창으로 열리는 a 태그</a>

속성 선택자는 다른 선택자와 함께 사용 가능
속성 선택자는 아이디, 태그, 클래스 선택자와 함께 사용할 수도 있고, 단독으로 사용할 수도 있다.

 

 

조합 선택자

조합 선택자는 기본 선택자와 함께 사용했을 때 선택자의 의미를 더 풍부하게 해 주는 선택자 방법이다.

 

그룹 선택자

그룹 선택자는 여러 선택자를 하나로 그룹 지을 때 사용한다.

선택자와 선택자는 콤마로 구분한다.

<style>
    p, #title, .red {
      color:red;
    }   
 </style>
<p class="red">red</p>
<p class="blue red">blue red</p>
<p id="title">아아아</p>

 

자식 선택자

자식 선택자는 부모 요소의 하위에 있는 자식 요소에 스타일을 적용할 때 사용한다.

2개 이상의 선택자가 사용되며, 선택자와 선택자는 > 기호로 구분한다.

자식 선택자를 사용해 아래의 코드처럼 작성하면 class 속성값이 box인 요소와 자식 관계인 p 태그로 작성된 요소만 선택자로 지정한다.

<style>
    .box > p{
        color:red;
    }
</style>
<div class="box">
    <p>lorem 1</p>
    <div>
        <p>lorem 2</p>
    </div>
    <p>lorem 3</p>
</div>

 

하위 선택자

하위 선택자는 선택자의 범위를 특정 부모 요소의 하위 요소로 한정하는 방법이다.

2개 이상의 선택자를 사용하고, 선택자와 선택자는 공백으로 구분한다.

<style>
    div p{
      color:red;
    }
  </style>
<div>
    <p>lorem 1</p>
    <ul>
        <li>
            <p>lorem 2</p>        
        </li>
        <li>
            <p>lorem 3</p>
        </li>
    </ul>
</div>
<p>lorem 4</p>

 

인접 형제 선택자

인접 형제 선택자는 앞에서 지정한 선택자 요소 바로 다음에 있는 형제 관계 요소를 선택자로 지정한다.

2개 이상의 선택자를 사용하고, 선택자와 선택자는 + 기호로 구분한다.

<style>
    h1 + h2{
      color:red
    }
</style>
<h1>lorem1</h1>
<h2>lorem2</h2>
<h2>lorem3</h2>

인접 형제 선택자 사용 시 주의점
인접 형제 선택자는 이전 요소 다음에 등장하는 형제 요소를 선택한다.
따라서 이전 요소보다 먼저 등장한 요소는 선택 대상이 아니다.

 

일반 형제 선택자

일반 형제 선택자는 이전 선택자 뒤에 오는 형제 관계 요소를 모두 선택자로 지정한다.

2개 이상의 선택자를 사용하며, 선택자와 선택자는 ~ 기호로 구분한다.

<style>
    h1 ~ h2{
      color:red
    }
</style>
<h1>lorem1</h1>
<h2>lorem2</h2>
<h2>lorem3</h2>

 

일반 형제 선택자도 인접 형제 선택자와 마찬가지로 이전 요소 다음에 등장하는 형제 관계의 요소를 대상으로 지정한다.
이전 요소보다 먼저 등장하는 형제 관계의 요소는 선택자 지정 대상이 아니다.

 

가상 요소 선택자

가상 요소 선택자는 HTML 문서에 명시적으로 작성된 구성 요소는 아니지만, 마치 존재하는 것처럼 취급해 선택하는 선택자 지정 방법을 말한다.

앞에 :: 기호를 붙여서 사용하며, 기준 선택자와 함께 사용한다.

만약 기준 선택자를 생략하면 전체 선택자가 들어간 것으로 적용된다.

가상 요소 선택자는 대략 14개 정도 있다.

이 글에서 다룰 가상 요소 선택자는 2개이다.

종류	설명
::before	콘텐츠 앞의 공간을 선택
::after	콘텐츠 뒤의 공간을 선택

::before 선택자는 기준 선택자 요소 앞의 공간을 선택하고, ::after 선택자는 기준 선택자 요소 뒤의 공간을 선택한다.

content 속성은 ::before 선택자와 ::after 선택자에서만 사용하는 속성으로, 새로운 콘텐츠를 만들거나 추가할 때 사용

<style>
    p::before{
      content:"<before>";
      color: red;
    }
    p::after{
      content:"<after>";
    }
</style>
<p>Lorem, ipsum dolor.</p>

 

가상 클래스 선택자

가상 클래스 선택자

링크 가상 선택자는 a 태그에서 발생할 수 있는 링크 상태를 이용해 선택하는 방법이다.

링크 가상 클래스 선택자는 a 태그에서 발생할 수 있는 링크 상태를 이용해 선택하는 방법이다.

종류	설명
:link	한 번도 방문하지 않은 링크일 때 선택
:visited	한 번이라도 방문한 적이 있는 링크일 때 선택

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>링크 가상 클래스</title>
    <style>
      a:link {
        color:orange;
      }
      a:visited {
        color:green;
      }
    </style>
  </head>
  <body>
    <a href="https://www.naver.com">네이버</a>
    <a href="https://www.google.com">구글</a>
  </body>
</html>

 

동적 가상 클래스 선택자

동적 가상 클래스 선택자는 사용자의 어떤 행동에 따라 동적으로 변하는 상태를 이용해 선택자를 지정하는 방법이다.

종류	설명
:hover	요소에 마우스를 올리면 해당 태그가 선택자로 지정
:active	요소를 마우스로 클릭하고 있는 동안 해당 태그가 선택자로 지정

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>:hover</title>
  <style>
    p:hover{
      color:red;
    }
  </style>
</head>
<body>
  <p>hover</p>
</body>
</html>

마우스를 위에 올리면 색이 변함

<style>
    button:active{ /*요소를 클릭하고 있을 때 적용*/
      color:red;
    }
</style>

마우스를 클릭하고 있는 동안 색이 변함

 

입력 요소 가상 클래스 선택자

입력 요소의 특정 상태를 이용해 선택자로 지정하는 방법이다.

종류	설명
:focus	입력 요소에 커서가 활성화되면 선택자로 지정
:checked	체크박스가 표시되어 있으면 선택자로 지정
:disabled	상호작용 요소가 비활성화되면(disabled 속성이 사용되면) 선택자로 지정
:enabled	상호작용 요소가 활성화되면(disabled 속성이 사용되지  않은 상태면) 선택자로 지정

입력 요소 : input, textarea
체크박스 : input 태그의 type이 checkbox인 요소
상호작용 요소 : 입력 요소와 체크박스를 포함하는 모든 상호작용이 가능한 요소

 

:focus

입력 요소에 커서가 활성화되면 스타일을 적용

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>:focus</title>
  <style>
    input:focus{
      color:red;
    }
  </style>
</head>
<body>
  <input type="text">
</body>
</html>

입력이 활성화되면 색이 변함

 

:checked

체크박스가 표시되어 있으면 스타일 적용

<!DOCTYPE html>
<html lang="en">
<head>
  <title>:checked</title>
  <style>
    input:checked + label{
      color:red;
    }
  </style>
</head>
<body>
  <input type="checkbox" id="userid">
  <label for="userid">아이디</label>
</body>
</html>

 

:disabled

상호작용 요소가 비활성화되어 있으면 스타일 적용

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>:disabled</title>
    <style>
      input:disabled,
      button:disabled {
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <input type="text" disabled />
    <button disabled>버튼</button>
  </body>
</html>

 

:enbled

상호작용 요소가 활성화되어 있으면 스타일을 적용

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>::enabled</title>
    <style>
      input:enabled,
      button:enabled {
        background-color:#ccc;
      }
    </style>
  </head>
  <body>
    <input type="text">
    <button>버튼</button>
  </body>
</html>

 

구조적 가상 클래스 선택자

구조적 가상 클래스 선택자는 HTML 태그의 사용 위치, 다른 태그와의 관계에 따라 요소를 선택하는 방법

 

:first-child와 :last-child

:first-child 선택자는 부모인 E 요소의 첫 번째 자식 요소를 선택하고, :last-child 선택자는 마지막 자식 요소를 선택

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>:first-child, :last-child</title>
  <style>
    li:first-child{
      color:red;
    }
    li:last-child{
      color:red;
    }
  </style>
</head>
<body>
  <ul>
    <li>lorem 1</li>
    <li>lorem 2</li>
    <li>lorem 3</li>
    <li>lorem 4</li>
  </ul>
</body>
</html>

 

:nth-child(n)과 :nth-last-child(n)

:nth-child(n) 선택자는 E 요소가 부모의 모든 자식 요소 중 n 번째 자식 요소가 맞으면 선택

nth-last-child(n) 선택자도 부모 요소의 자식 요소 중 끝에서부터 찾는 점만 빼면 위와 동일하다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>nth-child(n)</title>
  <style>
    p:nth-child(1){
      color:red;
    }
  </style>
</head>
<body>
  <p>lorem 0</p>
  <div>
    <p>lorem 1</p>
    <p>lorem 2</p>
  </div>
  <div>
    <p>lorem 3</p>
    <p>lorem 4</p>
  </div>
</body>
</html>

 

:first-of-type과 :last-of-type

:first-of-type

:first-of-type 선택자는 부모의 자식 중에서 첫 번째로 등장하는 E 요소를 선택

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>:first-of-type</title>
  <style>
    p:first-of-type{
      color:red;
    }
  </style>
</head>
<body>
  <span>span0</span>
  <p>lorem 0</p>
  <div>
    <span>span1</span>
    <p>lorem 1</p>
    <p>lorem 2</p>
  </div>
  <span>span2</span>
  <span>span3</span>
  <p>lorem 3</p>
  <p>lorem 4</p>
</body>
</html>

 

:last-of-type

:last-of-type 선택자는 부모의 자식 중에서 마지막에 나오는 E 요소를 선택

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>:last-of-type</title>
  <style>
    p:last-of-type{
      color:red;
    }
  </style>
</head>
<body>
  <span>span0</span>
  <p>lorem 0</p>
  <div>
    <p>lorem 1</p>
    <p>lorem 2</p>
    <span>span1</span>
  </div>
  <span>span2</span>
  <p>lorem 3</p>
  <p>lorem 4</p>
  <span>span3</span>
</body>
</html>

 

다양한 선택자 조합

선택자는 서로 조합해서 사용할 수 있다.

아래와 같은 선택자 조합은 실무에서도 흔하게 사용하며 문법적으로도 허용된다.

 

일반적이지는 않지만 아래와 같은 형태도 가능하다.

 

또는 가상 클래스와 하위 선택자, 자식 선택자를 조합한 형태도 가능하다.