[css] CSS 선택자 정리

insung·2025년 4월 19일

CSS 선택자

CSS

목록 보기

10/14

CSS 선택자 가이드

CSS 선택자는 HTML 문서에서 스타일을 적용할 요소를 선택하는 데 사용.
다양한 선택자를 조합해서 특정 요소를 정확하게 선택하고 스타일을 지정할 수 있음.

기본적인 선택자

전체 선택자 *
- 문서 내의 모든 HTML 요소를 선택.


  // 모든 요소의 margin과 padding을 0으로 설정.
  * {
    margin: 0;
    padding: 0;
  }

태그 선택자 (Type Selector)
- 특정 HTML 태그 이름을 가진 모든 요소를 선택.


  // 모든 div 요소에 검은색 테두리 적용.
  div {
    border: 1px solid black;
  }

클래스 선택자 (Class Selector)
- class 속성 값이 특정 값과 일치하는 모든 요소를 선택.
- 클래스 이름은 .으로 시작.


  <p class="text blue">이 텍스트는 파란색입니다.</p>
  <p class="text">이 텍스트는 기본 스타일입니다.</p>

  // class가 text인 모든 <p> 요소의 글자 크기를 16px로 설정.
  // class가 blue인 모든 요소의 글자 색상을 파란색으로 설정.
  .text {
    font-size: 16px;
  }
  .blue {
    color: blue;
  }

ID 선택자 (ID Selector)
- id 속성 값이 특정 값과 일치하는 요소를 선택.
- id 이름은 #으로 시작. id는 문서 내에서 유일해야 함.


  <div id="container">
    <h1>컨테이너 제목</h1>
    <p>컨테이너 내용</p>
  </div>

  // id가 container인 <div> 요소의 배경색을 연한 회색으로 설정하고, 안쪽 여백을 20px로 설정.

  #container {
    background-color: lightgray;
    padding: 20px;
  }

속성 선택자 (Attribute Selector)
- 특정 속성을 가진 요소를 선택.


  <input type="text" name="username">
  <input type="password" name="password" required>
  <a href="https://www.example.com">링크</a>
  <a href="https://www.example.org" target="_blank">새 창으로 열기</a>

  // type 속성 값이 "text"인 <input> 요소에 파란색 테두리 적용.
  input[type="text"] {
    border: 1px solid blue;

  // required 속성을 가진 <input> 요소의 배경색을 연한 노란색으로 설정.
  input[required] {
    background-color: lightyellow;
  }

  // href 속성이 "https://www.example" 로 시작하는 태그의 색을 초록색으로 설정
  a[href^="[https://www.example](https://www.example)"]{
      color: green;
  }

  // target 속성값이 "_blank" 인 태그의 폰트 weight를 bold로 설정
  a[target="_blank"] {
    font-weight: bold;
  }

결합자 (Combinators)

자손 결합자 (Descendant Combinator)
- 특정 요소의 하위에 있는 모든 요소를 선택 (깊이에 상관없이). 공백 문자( )으로 구분.


  <div>
    <p>div의 자식 문단</p>
    <span>
      <p>span의 자손 문단</p>
    </span>
  </div>

  // div 요소 내에 있는 모든 <p> 요소에 밑줄 적용.
  div p {
    text-decoration: underline;
  }

자식 결합자 (Child Combinator) -
- 특정 요소의 바로 아래 자식 요소를 선택. > 기호로 구분.


  <div>
    <p>div의 자식 문단</p>
    <span>
      <p>span의 자손 문단</p>
    </span>
  </div>

  // div 요소 바로 아래에 있는 <p> 요소에 노란색 배경색 적용. (span 안에 있는 p에는 적용되지 않음)
  div > p {
    background-color: yellow;
  }

인접 형제 결합자 (Adjacent Sibling Combinator)
- 특정 요소 바로 뒤에 오는 형제 요소를 선택. + 기호로 구분.

  
  <ul>
    <li>아이템 1</li>
    <li class="active">활성 아이템</li>
    <li>아이템 3</li>
    <li>아이템 4</li>
  </ul>

  // class가 active인 <li> 요소 바로 뒤에 오는 <li> 요소의 글자 색상을 초록색으로 설정.
  .active + li {
    color: green;
  }

일반 형제 결합자 (General Sibling Combinator)
- 특정 요소 뒤에 오는 모든 형제 요소를 선택. ~ 기호로 구분.


  <ul>
    <li>아이템 1</li>
    <li class="active">활성 아이템</li>
    <li>아이템 3</li>
    <li>아이템 4</li>
  </ul>

  // class가 active인 <li> 요소 뒤에 오는 모든 <li> 요소에 이탤릭체 스타일 적용.
  .active ~ li {
    font-style: italic;
  }

의사 클래스 선택자 (Pseudo-Classes)

:hover
- 마우스 커서가 요소 위에 올라와 있을 때 요소를 선택.


  // <button> 요소에 마우스 커서를 올리면 배경색이 주황색으로 변하고, 커서 모양이 손 모양으로 변경.
  button:hover {
    background-color: orange;
    cursor: pointer;
  }

:active
- 요소가 활성화되었을 때 (마우스 버튼을 누르고 있는 동안) 요소를 선택.


  // <button> 요소를 클릭하는 동안 배경색이 빨간색으로 변하고, 살짝 아래로 이동.
  button:active {
    background-color: red;
    transform: translateY(2px); /* 살짝 아래로 이동 */
  }

:focus
- 요소가 포커스를 받았을 때 (예: 요소 클릭) 요소를 선택.


  // <input> 요소에 포커스가 오면 파란색 테두리가 생기고, 기본 외곽선은 제거.
  input:focus {
    border: 2px solid blue;
    outline: none; /* 기본 외곽선 제거 */
  }

:visited
- 사용자가 방문한 링크를 선택. 보안상의 이유로 스타일 제한적.


  // 방문한 <a> 요소의 글자 색상을 보라색으로 설정.
  a:visited {
    color: purple;
  }

:link
- 사용자가 방문하지 않은 링크를 선택.


  // 방문하지 않은 요소의 글자 색상을 초록색으로 설정
  a:link {
      color: green;
  }

:lang(언어코드)
- 특정 언어로 설정된 요소를 선택.


  <div lang="en">This is English text.</div>
  <div lang="ko">이것은 한국어 텍스트입니다.</div>

  // 언어가 한국어(ko)로 설정된 요소의 글자를 굵게 표시.
  :lang(ko) {
    font-weight: bold;
  }

:first-child
- 부모 요소의 첫 번째 자식 요소인 경우 선택.


  <ul>
    <li>첫 번째 아이템</li>
    <li>두 번째 아이템</li>
    <li>세 번째 아이템</li>
  </ul>

  // <ul> 요소의 첫 번째 <li> 요소 ( "첫 번째 아이템") 의 글자를 굵게 표시.
  li:first-child {
    font-weight: bold;
  }

:last-child
- 부모 요소의 마지막 자식 요소인 경우 선택.


  <ul>
    <li>첫 번째 아이템</li>
    <li>두 번째 아이템</li>
    <li>세 번째 아이템</li>
  </ul>

  // <ul> 요소의 마지막 <li> 요소 ("세 번째 아이템") 에 밑줄 적용.
  li:last-child {
    text-decoration: underline;
  }

:nth-child(n)
- 부모 요소의 n번째 자식 요소를 선택. n에는 숫자, even, odd, 수식 사용 가능.


  <ul>
    <li>아이템 1</li>
    <li>아이템 2</li>
    <li>아이템 3</li>
    <li>아이템 4</li>
    <li>아이템 5</li>
  </ul>

  // 두 번째 <li> 요소의 글자 색상을 빨간색으로 설정.
  li:nth-child(2) {
    color: red;
  }

  // 홀수 번째 <li> 요소의 배경색을 연한 회색으로 설정.
  li:nth-child(odd) {
    background-color: lightgray;
  }

  // 3n+1 번째 <li> 요소의 글자 크기를 1.2em으로 설정.
  li:nth-child(3n + 1) { /* 3n+1 번째 요소 (1, 4, 7...) */
      font-size: 1.2em;
  }

:nth-last-child(n)
- 부모 요소의 뒤에서부터 n번째 자식 요소를 선택.


  <ul>
    <li>아이템 1</li>
    <li>아이템 2</li>
    <li>아이템 3</li>
    <li>아이템 4</li>
    <li>아이템 5</li>
  </ul>

  // 뒤에서 두 번째 요소의 글자색을 파란색으로 설정
  li:nth-last-child(2) { /* 뒤에서 두 번째 요소 */
    color: blue;
  }

  // 뒤에서 홀수 번째 태그의 폰트 weight를 bold로 설정
  li:nth-last-child(odd){ /* 뒤에서 홀수 번째 요소 (1, 3, 5...) */
      font-weight: bold;
  }

:first-of-type
- 부모 요소의 특정 타입 자식 요소 중 첫 번째 요소를 선택.


  <div>
    <p>첫 번째 문단</p>
    <span>스팬 요소</span>
    <p>두 번째 문단</p>
  </div>

  // <div> 요소 내의 첫 번째 <p> 요소 ( "첫 번째 문단") 의 글자를 굵게 표시.
  p:first-of-type {
    font-weight: bold;
  }

:last-of-type
- 부모 요소의 특정 타입 자식 요소 중 마지막 요소를 선택.


  <div>
    <p>첫 번째 문단</p>
    <span>스팬 요소</span>
    <p>두 번째 문단</p>
  </div>

  // <div> 내의 마지막 태그에 underling 적용
  p:last-of-type{
      text-decoration: underline;
  }

:nth-of-type(n)
- 부모 요소의 특정 타입 자식 요소 중 n번째 요소를 선택.


  <div>
    <p>문단 1</p>
    <p>문단 2</p>
    <span>스팬 요소</span>
    <p>문단 3</p>
    <p>문단 4</p>
  </div>

  // <div> 요소 내에서 두 번째 <p> 요소 ( "문단 2") 의 글자 색상을 빨간색으로 설정.
  p:nth-of-type(2) {
    color: red;
  }

:nth-last-of-type(n)
- 부모 요소의 특정 타입 자식 요소 중에서 뒤에서 n번째 요소를 선택


  <div>
    <p>문단 1</p>
    <p>문단 2</p>
    <span>스팬 요소</span>
    <p>문단 3</p>
    <p>문단 4</p>
  </div>

  // <div>안에서 뒤에서 두번째 요소의 색깔을 red로 설정
  p:nth-last-of-type(2) {
    color: red;
  }

:only-child
- 부모 요소의 유일한 자식 요소인 경우 선택.


  <div>
    <p>유일한 문단</p>
  </div>
  <div>
    <p>첫 번째 문단</p>
    <p>두 번째 문단</p>
  </div>

  // 부모 요소가 하나의 <p> 자식만을 가지는 경우 (첫 번째 <div> 내의 <p>) 배경색을 연한 초록색으로 설정.
  p:only-child {
    background-color: lightgreen;
  }

:only-of-type
- 부모 요소의 특정 타입 자식 요소가 하나만 있는 경우 선택.


  <div>
    <p>문단</p>
    <span>스팬</span>
  </div>
  <div>
    <p>문단 1</p>
    <p>문단 2</p>
  </div>

  // <div> 요소 내에 <p> 요소가 하나만 있는 경우 (첫 번째 <div> 내의 <p>) 파란색 테두리 적용.
  p:only-of-type {
    border: 1px solid blue;
  }

:empty
- 자식 요소가 없는 요소를 선택 (텍스트 노드 포함).


  <div></div>
  <div>텍스트</div>
  <div><span></span></div>

  // 내부에 아무 내용도 없는 <div> 요소에 빨간색 점선 테두리 적용, 높이 20px 설정
  div:empty {
    border: 2px dashed red;
    height: 20px;
  }

:enabled
- 활성화된 폼 요소를 선택.


  <input type="text" value="활성화됨">
  <input type="text" disabled value="비활성화됨">
  <button>활성화된 버튼</button>
  <button disabled>비활성화된 버튼</button>

    // 활성화된 input 박스의 배경색을 lightgreen로 설정
    // 활성화된 button 의 글자색을 파란색으로 설정
  input:enabled {
      background-color: lightgreen;
  }
  button:enabled{
      color: blue;
  }

:disabled
- 비활성화된 폼 요소를 선택.


  <input type="text" value="활성화됨">
  <input type="text" disabled value="비활성화됨">
  <button>활성화된 버튼</button>
  <button disabled>비활성화된 버튼</button>

  // 비활성화된 input 박스의 배경색을 lightgray, 테두리를 gray로 설정
   input:disabled {
      background-color: lightgray;
      border: 1px solid gray;
  }

  // 비활성화된 button의 글자색을 gray, cursor를 not-allowed로 설정
  button:disabled {
      color: gray;
      cursor: not-allowed;
  }

:checked
- 체크된 라디오 버튼이나 체크박스를 선택.


  <input type="checkbox" id="agree" checked>
  <label for="agree">동의합니다.</label>

  // 체크된 체크박스 바로 뒤의 <label> 요소의 글자를 굵게 표시하고, 글자 색상을 초록색으로 설정.
  input:checked + label { /* 체크된 input 바로 뒤의 label */
    font-weight: bold;
    color: green;
  }

:indeterminate
- 상태가 결정되지 않은 폼 요소를 선택. (예: 그룹 체크박스 중 일부만 선택된 경우)


  <input type="checkbox" id="group"> <label for="group">그룹 체크박스</label>
  <script>
      document.getElementById('group').indeterminate = true;
  </script>

  // indeterminate 상태의 체크박스 바로 뒤의 label의 색을 purple, 스타일을 italic으로 설정
  input:indeterminate + label {
      color: purple;
      font-style: italic;
  }

:default
- 폼 요소 중 기본으로 선택된 요소를 선택


  <form>
      <input type="radio" name="option" value="1" checked> Option 1
      <input type="radio" name="option" value="2"> Option 2
      <input type="submit" value="Submit">
  </form>

      // 기본으로 선택된 input에 2px 초록색 테두리 적용

  input:default {
      border: 2px solid green;
  }

:valid
- 유효성 검사를 통과한 폼 요소를 선택.

  <input type="email" required value="test@example.com">
  <input type="email" required value="invalid-email">

  // 유효한 이메일 주소가 입력된 <input> 요소에 초록색 테두리 적용.
  input:valid {
    border: 2px solid green;
  }

:invalid
- 유효성 검사를 실패한 폼 요소를 선택.
  문법: 선택자:invalid { 속성: 값; }

  <input type="email" required value="test@example.com">
  <input type="email" required value="invalid-email">

    // 유효하지 않은 이메일 주소가 입력된 <input> 요소에 빨간색 테두리 적용.
  input:invalid {
    border: 2px solid red;
  }

:required
- required 속성이 있는 폼 요소를 선택.

  <input type="text" required>
  <input type="text">
    // required 속성이 있는 <input> 요소의 배경색을 연한 노란색으로 설정.
  input:required {
    background-color: lightyellow;
  }

:optional
- required 속성이 없는 폼 요소를 선택

  <input type="text" required>
  <input type="text">

    // required 속성이 없는 input 태그에 font style italic 적용
  input:optional{
      font-style: italic;
  }

:in-range
- min 및 max 속성 범위 내에 있는 폼 요소를 선택


  <input type="number" min="10" max="20" value="15">
  <input type="number" min="10" max="20" value="5">

    // 값이 10과 20 사이인 input 태그에 초록색 테두리 적용
  input:in-range {
      border: 2px solid green;
  }

:out-of-range
- min 및 max 속성 범위 밖에 있는 폼 요소를 선택


  <input type="number" min="10" max="20" value="15">
  <input type="number" min="10" max="20" value="5">
    
  // 값이 10과 20사이가 아닌 input 태그에 빨간색 테두리 적용
  input:out-of-range {
      border: 2px solid red;
  }

:read-only
- readonly 속성이 있는 폼 요소를 선택.

  <input type="text" value="읽기 전용 텍스트" readonly>
  <input type="text" value="편집 가능한 텍스트">

    // readonly 속성이 있는 <input> 요소의 배경색을 연한 회색으로 설정하고, 커서를 사용할 수 없는 모양으로 변경.
  input:read-only {
    background-color: lightgray;
    cursor: not-allowed;
  }

:read-write
- readonly 속성이 없는, 편집 가능한 폼 요소를 선택

   <input type="text" value="읽기 전용 텍스트" readonly>
   <input type="text" value="편집 가능한 텍스트">

  // readonly 속성이 없는 input 태그에 파란색 테두리 적용
  input:read-write {
     border: 1px solid blue;
  }

::selection
- 사용자가 선택한 텍스트 부분을 선택.

  // <p> 요소 내에서 사용자가 선택한 텍스트의 배경색을 노란색으로, 글자 색상을 검은색으로 설정.
  p::selection {
    background-color: yellow;
    color: black;
  }

의사 요소 선택자 (Pseudo-Elements)

::before
- 요소 콘텐츠의 바로 앞에 가상 요소를 생성하여 스타일 적용. content 속성을 사용하여 내용을 추가해야 함.
  문법: 선택자::before { 속성: 값; }

  <div class="box">내용</div>

  // class가 box인 <div> 요소 내용 앞에 "시작 " 텍스트를 회색으로 추가.
  .box::before {
    content: "시작 ";  /* "시작 " 텍스트 추가 */
    color: gray;
  }

::after
- 요소 콘텐츠의 바로 뒤에 가상 요소를 생성하여 스타일 적용. content 속성을 사용하여 내용을 추가해야 함.

  <div class="box">내용</div>

  // class가 box인 <div> 요소 내용 뒤에 " 끝" 텍스트를 회색으로 추가.
  .box::after {
    content: " 끝";  /* " 끝" 텍스트 추가 */
    color: gray;
  }

::first-letter
- 요소의 첫 번째 글자를 선택.

  <p>이것은 문단입니다.</p>

  // <p> 요소의 첫 번째 글자를 2배 크기로 키우고 빨간색으로 설정.
  p::first-letter {
    font-size: 2em;  /* 글자 크기를 2배로 */
    color: red;
  }

::first-line
- 요소의 첫 번째 줄을 선택.

  <p>이것은 매우 긴 문단입니다.  내용이 여러 줄로 표시될 수 있습니다.</p>

  // <p> 요소의 첫 번째 줄에 노란색 배경색 적용.
  p::first-line {
    background-color: yellow;
  }

::marker
- 리스트 아이템의 마커 (글머리 기호 또는 번호)를 선택.

  <ul>
    <li>아이템 1</li>
    <li>아이템 2</li>
    <li>아이템 3</li>
  </ul>

  // <li> 요소의 글머리 기호 색상을 파란색으로, 크기를 1.5배로 설정.
  li::marker {
    color: blue;
    font-size: 1.5em;
  }

::placeholder
- 폼 요소의 플레이스홀더 텍스트를 선택.


	<input type="text" placeholder="이름을 입력하세요">
  
  // <input> 요소의 플레이스홀더 텍스트 색상을 연한 산호색으로, 스타일을 이탤릭체로 설정.
  input::placeholder {
    color: lightcoral;
    font-style: italic;
  }

insung

안녕하세요 프론트엔드 관련 포스팅을 주로 하고 있습니다

이전 포스트

[css] js없이 아코디언 쉽게 구현하기

다음 포스트

[css] CSS 선택자 정리

CSS

CSS 선택자 가이드

기본적인 선택자

결합자 (Combinators)

의사 클래스 선택자 (Pseudo-Classes)

의사 요소 선택자 (Pseudo-Elements)

[css] js없이 아코디언 쉽게 구현하기

[css] text balance, dark mode, width auto vs 100%

0개의 댓글