CSS 선택자 완벽 가이드

기본 선택자

요소 선택자

특정 HTML 태그를 직접 지정하여 스타일을 적용합니다.

<style>
  section {
    background-color: #3498db;
  }
</style>

<body>
  <section>내용 1</section>
  <section>내용 2</section>
</body>

클래스 선택자

동일한 class 속성을 가진 여러 요소에 스타일을 공통 적용할 수 있습니다. 재사용성이 높아 가장 권장되는 방식입니다.

<style>
  .highlight {
    background-color: #e74c3c;
    color: white;
  }
</style>

<body>
  <div class="highlight">박스 A</div>
  <span class="highlight">텍스트 B</span>
  <p class="highlight">문단 C</p>
</body>

ID 선택자

문서 내에서 고유해야 하는 식별자를 기준으로 요소를 선택합니다. 우선위가 가장 높습니다.

<style>
  /* 우선순위: ID > 클래스 > 요소 */
  #unique {
    font-size: 24px;
    color: #2c3e50;
  }
  
  .common {
    color: #e67e22;
  }
  
  h3 {
    color: #27ae60;
  }
</style>

<body>
  <h3 id="unique" class="common">우선순위 테스트</h3>
</body>

계층 구조 선택자

선택자	의미	적용 범위
`A B`	후손 선택자	A 내부의 모든 B
`A > B`	자식 선택자	A의 바로 아래 B만
`A + B`	인접 형제 선택자	A 바로 다음의 B 하나
`A ~ B`	일반 형제 선택자	A 이후의 모든 형제 B

<style>
  /* nav 내부 모든 li에 적용 */
  nav li {
    margin-left: 10px;
  }
  
  /* nav의 직계 자식 ul만 적용 */
  nav > ul {
    border: 1px solid #333;
  }
  
  /* .current 바로 다음의 li만 적용 */
  .current + li {
    font-weight: bold;
  }
  
  /* .current 이후의 모든 형제 li에 적용 */
  .current ~ li {
    opacity: 0.6;
  }
</style>

<nav>
  <ul>
    <li>홈</li>
    <li class="current">소개</li>
    <li>서비스</li>
    <li>문의</li>
  </ul>
</nav>

구조적 가상 클래스 선택자

요소의 문서 내 위치나 상태를 기준으로 선택합니다.

<style>
  /* 첫 번째 자식 */
  ol li:first-child {
    background: #9b59b6;
  }
  
  /* 마지막 자식 */
  ol li:last-child {
    background: #1abc9c;
  }
  
  /* n번째 자식 (모든 형제 중 순서) */
  /* 주의: 태그 종류 상관없이 모든 자식 중 n번째 */
  article p:nth-child(3) {
    background: #f39c12;
  }
  
  /* n번째 해당 타입 요소 (같은 태그끼리 순서) */
  article p:nth-of-type(2) {
    border: 2px dashed #e74c3c;
  }
  
  /* 홀수/짝수 패턴 */
  tr:nth-child(odd) { background: #ecf0f1; }
  tr:nth-child(even) { background: #bdc3c7; }
</style>

<article>
  <h4>제목</h4>
  <p>첫 번째 문단</p>
  <p>두 번째 문단</p>
  <span>중간 요소</span>
  <p>세 번째 문단</p>
</article>

속성 선택자

HTML 요소의 속성 값을 기준으로 필터링합니다.

<style>
  .gallery a {
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 12px;
    background: #34495e;
    color: #ecf0f1;
    text-decoration: none;
    margin: 4px;
  }
  
  /* 특정 속성이 존재하는 요소 */
  a[data-modal] {
    border: 3px solid #e74c3c;
  }
  
  /* 속성값이 정확히 일치 */
  a[rel="external"] {
    background: #8e44ad;
  }
  
  /* 속성값에 특정 문자열 포함 */
  a[class*="thumb"] {
    font-style: italic;
  }
  
  /* 속성값이 특정 문자열로 시작 */
  a[href^="https"] {
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  }
  
  /* 속성값이 특정 문자열로 끝남 */
  a[href$=".jpg"] { background: #d35400; }
  a[href$=".png"] { background: #27ae60; }
  a[href$=".pdf"] { background: #c0392b; }
</style>

<div class="gallery">
  <a href="https://example.com" data-modal="true" class="thumb-01">A</a>
  <a href="page.html" rel="external" class="thumb-02">B</a>
  <a href="photo.jpg" class="thumb-03">C</a>
  <a href="diagram.png">D</a>
  <a href="report.pdf">E</a>
</div>

우선순위 요약

선택자의 구체성(Specificity)에 따른 우선순위는 다음과 같습니다:

인라인 스타일: style="" 속성
ID 선택자: #identifier
클래스/속성/가상 클래스: .class, [attr], :hover
요소/가상 요소: div, ::before

동일 우선순위 시에는 소스 코드의 마지막에 선언된 규칙이 적용됩니다.

태그: CSS selector Specificity web-design frontend

7월 9일 03:02에 게시됨

괴물 클럽