H'academy
  • H'academy
  • Web
    • Back-end
      • Spring Framework
        • Spring 개발환경 구축
          • Project 생성
          • Maven 설정
          • Maven 저장소 위치 설정
          • Apache Tomcat 연동
          • Lombok 설정
        • Spring MVC Project
          • pom.xml
          • web.xml
          • root-context.xml
          • servlet-context.xml
          • DispatcherServlet
        • Controller
          • File Upload / Download
          • RestController(작성중)
        • Spring Test
          • Assert 단정문
          • Spring 환경 연동 테스트
          • MockMvc Test
        • Spring AOP
          • AOP 용어
          • Pointcut Expression
          • Filter
          • Interceptor
          • Filter vs Interceptor
          • Controller Advice(작성중)
        • Spring JDBC
          • DBCP
          • myBatis
            • ResultMap 활용
        • ETC
          • Logging
            • Tomcat Logging 설정
          • Property 관리
          • E-mail
            • Gmail 변경사항
          • Scheduler
          • Websocket
      • Spring Boot
        • STS 다운로드
        • 프로젝트 생성
        • 프로젝트 구조
        • Spring Devtools
        • Spring Controller
          • JSP 연동
            • * JSP 생성불가 문제
            • Spring Boot 3.x
          • Model
          • 요청 파라미터 처리
          • 경로 변수 처리
          • 요청 메소드
          • Redirect
          • Spring Actuator
        • Spring Boot JDBC
          • Database 정보
          • DAO Pattern
          • ORM Framework
            • myBatis
              • Mapper 생성
            • Spring Data JPA
        • Spring AOP
          • AspectJ
          • Filter
          • Interceptor
          • ControllerAdvice
        • REST API
        • Spring WebSocket
        • Send Mail
        • Logging
        • Spring Boot Test
        • Lombok
      • Java EE
        • 개발환경 구성
          • Server와 Client
          • Web Server와 WAS
        • Dynamic Web Project
      • Apache Tomcat
        • Apache Tomcat 구조
        • Tomcat User 생성
        • Tomcat Manager 설정
      • Maven
      • Jenkins
        • Installation
          • Github Webhook 설정
          • Maven 연동
        • Project setting
          • 소스 코드 관리 설정
          • 빌드 유발 설정
          • 빌드 작업 설정
      • OpenAPI(swagger)
        • swagger 2.x (legacy)
        • swagger 3.x (boot)
        • Swagger UI 꾸미기
        • SpringDoc
    • Front-end
      • HTML
        • Heading
        • <A>
        • <IMG>
        • <DIV>
        • <TABLE>
        • <FORM>
          • <INPUT>
          • <SELECT>
          • <TEXTAREA>
          • <FIELDSET>
        • List
      • CSS
        • CSS 적용 방식
          • 크기(size)
            • 픽셀(px)
          • 색상(color)
        • CSS 선택자
          • 스타일 우선순위
        • CSS 주요 속성
          • 크기 속성
            • border
            • margin
            • padding
            • box-sizing
          • 배경 속성
          • 글자 속성
            • font
            • text
          • 배치 속성
            • position
            • display
            • overflow
            • float
            • flexbox
        • CSS Reset
      • JS
        • syntax
          • let, const
          • 구조 분해 할당
          • spread operator
          • Object copy
          • this
          • module
        • jQuery
          • structure
          • function
          • ajax
            • ajax file upload
        • VueJS
          • CDN(Vue3)
            • 기본 구조
            • Vue Devtools
            • jQuery vs VueJS
            • Vue instance
              • data
                • IME issue
              • v-model
              • template
              • computed
              • watch
                • deep watch
                • vs Computed
              • methods
            • Vue directive
              • v-text
              • v-html
              • v-bind
                • v-bind style
                • v-bind class
              • v-on
                • once
                • prevent
              • v-show
              • v-if
              • v-for
          • Vue-cli 3
            • 프로젝트 구조
            • src
              • main.js
              • App.vue
              • HelloWorld.vue
            • Vue Router 4
              • History mode
              • 404 not found
              • Guard
                • beforeEach
            • Vuex
              • 이동 횟수 측정
            • axios
              • interceptor
          • Vue-electron
        • ReactJS
          • CDN(React18)
            • 템플릿 설명
            • JSX
            • render
            • Handling Events
              • onClick
              • onInput
            • Component
              • 클래스 컴포넌트
                • state
                • props
                • event
                  • Mouse
                  • Input
                • lifecycle
              • 함수형 컴포넌트
                • useState
                • useEffect
                • useReducer
                • useMemo
                • props
                • 조건부 렌더링
          • CRA
            • 자원 경로 설정
            • src 절대 경로 설정
            • react-router
            • Context API
            • Electron 설정
        • Webpack
          • NodeJS
          • Git
    • Ubuntu server
      • Jenkins
    • 테스트 도구
      • JMeter
        • Test Plan
        • Test Plan(with login)
        • Plugin 설치
    • WebRTC
  • Base Language
    • Java
      • Java 실행 과정
        • 개발 환경 구축
        • 샘플 코드 작성
        • 컴파일/실행
        • 환경 변수 설정
      • Java 초급
        • Hello world
        • 자료와 정보
        • 변수
          • 정수
            • 정수의 저장 원리
            • 정수형 변수 생성
          • 실수
            • 실수의 저장 원리
            • 실수형 변수 생성
          • 논리
            • 논리형 변수 생성
          • 문자
          • 문자열
            • 문자열 변수 생성
          • 사용자 정의 자료형
        • 연산자
          • 대입 연산
          • 부호 연산
          • 산술 연산
          • 복합 대입 연산
          • 증감 연산
          • 쉬프트 연산
          • 비트 연산
          • 비교 연산
          • 논리 연산
          • 삼항 연산
          • 변환 연산
        • 표준 입출력
          • 표준 출력
          • 표준 오류 출력
          • 표준 입력
            • Scanner 입력
        • 제어문
          • if 구문
            • 단일 조건
            • 두 가지의 조건
            • 여러 가지의 조건
          • switch~case 구문
          • while 구문
          • do~while 구문
          • for 구문
        • 랜덤(Random)
        • 배열
          • 1차원 배열
          • 2차원 배열
          • 다차원 배열
          • Sort
            • 선택 정렬
            • 버블 정렬
            • 삽입 정렬
      • Java 중급
        • 객체 지향 프로그래밍
        • 클래스
        • 인스턴스
        • 필드
        • 메소드
          • 설정(setter) 메소드
          • 반환(getter) 메소드
        • 생성자
        • 접근 제한
          • private
          • package
          • protected
          • public
        • 정적(static)
        • 불변(final)
        • 상수(constant)
        • 상속
          • this와 super의 이해
          • 멤버 변수 설정
          • 멤버 메소드 설정
          • 생성자 설정
        • 추상화
          • 추상 클래스
          • 인터페이스
        • 다형성
        • 중첩 클래스
          • 일반 중첩 클래스
          • static 중첩 클래스
          • 지역 중첩 클래스
          • 익명 중첩 클래스
      • Java API(작성중)
        • java.lang
        • java.util
        • java.text
        • java.time
        • java.io
        • java.net
        • java.sql
        • java.awt
        • javax.swing
      • Java 고급
        • 제네릭(Generic)
        • 열거형(Enum)
        • Annotation Type
          • Retention
          • Target
          • Nested Annotation
        • Java Reflection
          • Intro
          • Class
          • Field
          • Constructor
          • Method
          • Package
      • JDBC
        • 드라이버 로드
        • 연결 생성
          • JDBC Driver 유형
        • JdbcTemplate
      • Java 버전별 변경사항
        • Java 1.8
          • Lambda Expression
          • Stream API
          • java.time 패키지
        • Java 9
        • Java 12
          • switch~case
        • Java 13
          • Text Block
    • Arduino
      • 학습 준비
        • Reference
        • 아두이노 온라인 시뮬레이터
        • 전기의 이해
        • 그라운드(GND)의 이해
      • 개발 환경 구축
        • CH340 보드 설치
        • Editor 글꼴 설정
      • 아두이노 제어
        • 코드의 구성
        • 시리얼 출력
        • 디지털 출력
          • LED 출력
        • PWM 출력
        • 시리얼 입력
        • 디지털 입력
          • PIR 센서
        • 아날로그 입력
          • 온도 센서(LM35DZ)
          • 조도 센서
          • 가스 센서
        • 피에조 부저
        • 서보 모터 제어
          • 시리얼 서보 모터 제어
          • 스위치 서보 모터 제어
        • 온습도 센서(DHT-11)
        • LCD
      • 아두이노 통신
        • 블루투스(Bluetooth)
          • HC-06
            • 온도 센서 활용
          • HM-10
        • 와이파이(Wi-Fi)
          • ESP-01
            • WiFiEsp 라이브러리 추가
            • WiFiEsp 네트워크 스캔
        • 이더넷(Ethernet)
        • ArduinoJson 라이브리 사용
    • Regular Expression
  • Database
    • Oracle
      • 설치
        • SQL Plus
        • SQL Developer
        • DBeaver
        • Docker(Mac OS)
      • SQL
        • 관리자 명령
          • 사용자 관리
          • 권한 관리
          • Encoding 설정
          • 서비스 포트 설정
        • 사용자 명령
          • 테이블 관리
            • 테이블 항목 제약 조건
            • 외래키 제약조건
            • 데이터 유형
          • 시퀀스 관리
          • 데이터 관리
            • 데이터 추가
            • 데이터 조회
              • 오라클 내장 함수
              • 그룹 조회
              • Top N Query
            • 데이터 수정
            • 데이터 삭제
          • 뷰 관리
          • 인덱스 관리
          • 집합 연산
          • 테이블 조인
            • 등가 조인
            • 외부 조인
        • HR 계정
        • 기타 명령
          • 컬럼 간격 조정
      • 내보내기 및 불러오기
        • EXPDP, IMPDP
        • Docker로 실행중인 경우
      • 기타
        • 자동 세션 제거
        • Tablespace 관리
        • Unlock user
  • 면접대비
    • Q&A
      • Java
      • Database
      • Web
      • IT 일반상식
  • ETC
    • Eclipse IDE
      • 설치
      • 화면 설명
      • 환경 설정
      • 프로젝트 생성
      • 소스파일 작성 및 실행
    • Github
      • Github 계정 관리
      • Github 저장소 관리
        • Profile
        • Collaborators
        • Code
        • Issues
        • Pull requests
        • Action
          • Vue 3 Deploy Action
      • Personal Access Token
      • Git ignore 설정
        • Spring 개발용 샘플
      • Github Eclipse 연동
        • Branches
        • Project
        • Team project
          • Dynamic web project
          • Spring Boot Project
          • Branch 생성
          • Pull Request
          • Branch 보호
          • Branch 다시 생성
    • Figma
      • Team
      • Design
      • Component
    • 과정평가형
      • 실기 모의고사 1회
      • 실기 모의고사 2회
      • 실기 모의고사 3회
      • 실기 모의고사 4회
    • VScode
      • Live Server 실행 오류
      • Github 계정 변경
    • Naver ToastUI Editor
      • Editor 만들기
        • Editor options
          • File upload
      • Viewer 만들기
    • 문자 인코딩 방식
    • OBS
      • 녹화 잡음 제거 설정
    • Semantic Version
Powered by GitBook
On this page
  • CSS 선택자
  • 선택자란
  • 전체 선택자
  • 태그 선택자
  • 속성 선택자
  • 아이디 선택자
  • 클래스 선택자
  • 연계 선택자
  • 상태 선택자
  1. Web
  2. Front-end
  3. CSS

CSS 선택자

CSS 선택자

이 문서에서는 CSS 선택자(selector)에 대해서 다룬다.

선택자란

선택자(Selector)란 문서 내의 요소(Element)를 선택할 수 있도록 작성하는 글자이다. 선택자는 기호에 따라 여러 가지 의미를 가지며, 종류는 크게 다음과 같이 구분해볼 수 있다.

  • 전체 선택자

  • 태그 선택자

  • 속성 선택자

  • 아이디 선택자

  • 클래스 선택자

  • 상태 선택자

  • 연계 선택자

  • 가상 선택자

전체 선택자

전체 선택자는 이름 그대로 모든 요소에 적용시키기 위한 선택자를 말한다. 전체 선택자는 다음과 같이 작성한다.

* {
    /* 적용할 디자인 항목과 속성을 작성 */
}

위와 같이 설정할 경우 문서 내의 모든 요소에 적용되므로 사용할 때 반드시 공통적인 부분들만 설정해야 한다. 주로 사용하는 속성으로는 font, box-sizing 등이 있다.

태그 선택자

특정 태그만 선택하고 싶은 경우에는 태그 선택자를 사용할 수 있다. 태그 선택자의 경우 이름을 통해 선택을 하며, 코드의 형태는 다음과 같다.

태그명 {
    /* 적용할 디자인 항목과 속성을 작성 */
}

전체 선택자와 마찬가지로 많은 수의 태그들을 한 번에 불러와서 처리하기 때문에 특정 태그에 대한 공통 처리들 위주로 작성해야 한다.

만약 모든 h1 태그의 글자색을 빨강으로 설정하고 싶다면 다음과 같이 구문을 작성할 수 있다.

h1 {
    color:red;
}

속성 선택자

속성 선택자는 태그에 부여된 속성을 이용하여 선택하는 선택자를 말한다. 속성이 부여되어있는 태그의 예시는 다음과 같다.

<input type="text" name="id">
<input type="checkbox" name="agree">

위의 경우 둘 다 input 태그로 동일하기 때문에 태그 선택자로는 선택이 어려우며, 태그의 속성인 type이나 name을 이용하여 구분할 수 있다. 따라서 다음과 같이 선택 구문을 만들 수 있다.

/* <input type="text" name="id"> 를 type으로 선택 */
input[type=text] {
    /* 적용할 디자인 항목과 속성을 작성 */
}
/* <input type="text" name="id"> 를 name으로 선택 */
input[name=id] {
    /* 적용할 디자인 항목과 속성을 작성 */
}

/* <input type="checkbox" name="agree"> type으로 선택 */
input[type=checkbox] {
    /* 적용할 디자인 항목과 속성을 작성 */
}
/* <input type="checkbox" name="agree"> name으로 선택 */
input[name=agree] {
    /* 적용할 디자인 항목과 속성을 작성 */
}

아이디 선택자

HTML 태그에는 다음과 같이 id 속성을 부여할 수 있다. id 속성의 특징은 다음과 같다.

  • id 속성은 페이지 내에서 대상을 유일하게 식별할 수 있어야 한다.

  • id 속성은 하나의 태그에 하나만 부여할 수 있다.

  • id 속성은 띄어쓰기가 불가하며, 대시(-)나 언더스코어(_)를 사용할 수 있다.

id가 부여된 태그의 형태는 다음과 같다.

<h1 id="header">...</h1>

이 경우 태그 이름으로 선택도 가능하며, id를 이용하여 선택할 수도 있다. 아이디를 이용하여 선택하는 경우 다음과 같이 코드를 작성할 수 있다.

h1[id=header] {
    /* 적용할 디자인 항목과 속성을 작성 */
}

id 역시 속성이므로 속성 선택자를 이용하여 선택할 수 있지만 id만을 위한 전용 기호인 #을 사용할 수 있다.

h1#header{
    /* 적용할 디자인 항목과 속성을 작성 */
}

id는 유일한 식별자이므로 태그의 이름을 적지 않아도 무관하며, 태그 이름을 작성하지 않는 경우 다음과 같이 작성한다.

#header{
    /* 적용할 디자인 항목과 속성을 작성 */
}

클래스 선택자

class란 선택 또는 그룹화를 위해 부여가 가능한 값을 말한다. class의 특징은 다음과 같다.

  • class는 태그 하나에 여러 개 부여가 가능하다.

  • class는 띄어 쓰기를 사용하면 다른 값으로 인식한다.

  • 하나의 class를 여러 개의 태그에 부여할 수 있다.

  • class를 이용하여 HTML 요소의 그룹화를 수행할 수 있다.

class가 부여된 태그의 예시는 다음과 같다.

<h1 class="headline">테스트 헤더1</h1>
<h1 class="headline headline-bold">테스트 헤더2</h1>

첫 번째 h1 태그는 클래스가 1개 부여되어 있으며, 두 번째 h1 태그는 클래스가 2개 부여되어 있다. 위와 같은 형태의 태그를 선택하기 위해서는 속성 선택자나 클래스 선택자를 사용할 수 있다.

/* 속성 선택자를 사용하여 테스트 헤더1 선택 */
h1[class=headline] { /*...*/ }

/* 속성 선택자를 사용하여 테스트 헤더2 선택 */
h1[class=headline-bold] { /*...*/ }

h1[class=headline][class=headline-bold] { /*...*/ }

/* 클래스 선택자를 사용하여 테스트 헤더1 선택 */
h1.headline { /*...*/ }

.headline{ /*...*/ }

/* 클래스 선택자를 사용하여 테스트 헤더2 선택 */
h1.headline.headline-bold { /*... */ }

.headline.headline-bold { /*...*/ }

class로 대상을 선택할 때도 태그명을 생략할 수 있으며, 같이 적으면 범위가 좀 더 제한된다. 주의사항으로는 .headline.headline-bold 처럼 여러개의 클래스가 적용된 태그를 선택하고 싶을 경우 선택자 사이에 띄어쓰기를 하면 안된다는 것이다.

연계 선택자

연계 선택자는 특정 태그를 기준으로 하여 태그를 선택하기 위한 선택자이다. CSS 선택자에서는 다음 네 가지의 연계 선택을 지원한다.

  • + : 기준 태그의 바로 뒤에 있는 한 개의 태그를 선택한다.

  • ~ : 기준 태그의 뒤에 있는 모든 태그를 선택한다.

  • > : 기준 태그의 바로 밑에 있는 태그를 선택한다.

  • : 기준 태그의 밑에 있는 모든 태그를 선택한다(띄어쓰기)

주의사항은 상위태그, 전방태그는 선택이 불가능하다는 것이다.

+ 선택자

+ 선택자는 바로 뒤에 있는 태그를 선택한다.

파랑으로 선택된 부분이 기준 태그이며, 빨강으로 선택된 부분이 + 선택자로 선택된 태그이다. 실제로 이 부분에 대해서 이해하기 위해 위의 코드를 구조화 시키면 다음과 같이 작성될 수 있다.

html
  +-- head
  |   +-- style
  +-- body
      +-- h3.tmp(기준태그)
      +-- h3(선택대상)
      +-- h3
      +-- h3
      +-- h3

html 요소들은 tree 형태로 배치되며, 작성 순서대로 위치하기 때문에 같은 깊이(depth)에서 + 선택자를 이용하여 바로 뒤(아래) 있는 태그를 선택할 수 있다.

~ 선택자

+ 선택자에서 작성한 코드를 ~ 선택자를 이용하는 것으로 수정하면 다음과 같이 결과가 달라지게 된다.

~ 선택자는 뒤에 있는 모든 태그를 선택하기 때문에 같은 깊이(depth)에 존재하는 태그를 모두 선택하게 된다. tree 구조로 살펴보면 선택되는 원리를 확인할 수 있다.

html
  +-- head
  |   +-- style
  +-- body
      +-- h3.tmp(기준태그)
      +-- h3(선택대상)
      +-- h3(선택대상)
      +-- h3(선택대상)
      +-- h3(선택대상)

> 선택자

> 선택자는 바로 아래 계층에 존재하는 태그를 선택할 수 있다. 이를 위해서는 조금 더 계층화된 코드가 필요하며, 이를 위해 list 태그를 사용해본다.

list의 경우 중첩하여 계층 구조를 표현하기에 적합하다.

1-1부터 1-5까지만 빨강으로 설정되는 것을 확인할 수 있으며, 그보다 하위에 있는 글자들은 색상이 변하지 않는다는 것을 확인할 수 있다. 이를 tree 계층으로 변환하여 살펴보면 더 쉽게 이해할 수 있다.

html
  +-- head
  |   +-- style
  +-- body
      +-- ul.tmp(기준태그)
          +-- li(하위요소)
          |   +-- a(선택대상)
          +-- li(하위요소)
          |   +-- a(선택대상)
          |   +-- ul
          |   |   +-- li
          |   |   |   +-- a
          |   |   +-- li
          |   |   |   +-- a
          |   |   +-- li
          |   |   |   +-- a
          +-- li(하위요소)
          |   +-- a(선택대상)
          |   +-- ul
          |   |   +-- li
          |   |   |   +-- a
          |   |   +-- li
          |   |   |   +-- a
          |   |   +-- li
          |   |   |   +-- a
          +-- li(하위요소)
          |   +-- a(선택대상)
          +-- li(하위요소)
              +-- a(선택대상)

위의 구조를 보면 > 선택자를 통하여 바로 아래 계층만 선택하는 것을 확인할 수 있다.

하위 선택자(띄어쓰기)

특정 태그의 하위(내부)에 존재한 모든 대상에게 효과를 주고 싶은 경우에는 띄어쓰기를 사용한다. > 선택자에서 살펴본 코드를 조금 수정하면 특징을 확인할 수 있다.

실행 결과를 확인해보면 모든 a태그의 글자가 빨강으로 나오는 것을 확인할 수 있다. tree 구조를 통해 살펴보면 기준이 되는 태그에 속해 있는 모든 하위 요소가 다 선택되는 것을 확인할 수 있다.

html
  +-- head
  |   +-- style
  +-- body
      +-- ul.tmp(기준태그)
          +-- li
          |   +-- a(선택대상)
          +-- li
          |   +-- a(선택대상)
          |   +-- ul
          |   |   +-- li
          |   |   |   +-- a(선택대상)
          |   |   +-- li
          |   |   |   +-- a(선택대상)
          |   |   +-- li
          |   |   |   +-- a(선택대상)
          +-- li
          |   +-- a(선택대상)
          |   +-- ul
          |   |   +-- li
          |   |   |   +-- a(선택대상)
          |   |   +-- li
          |   |   |   +-- a(선택대상)
          |   |   +-- li
          |   |   |   +-- a(선택대상)
          +-- li
          |   +-- a(선택대상)
          +-- li
              +-- a(선택대상)

상태 선택자

상태 선택자는 특정 상태인 경우를 선택하기 위한 선택자이다. 이를 이용하여 다양한 상태에 특화된 디자인을 처리할 수 있다.

:first-child

first-child 상태는 그룹의 첫 번째 요소를 선택하기 위한 선택자이다.

예시 코드와 실행 결과는 다음과 같다.

1-1과 2-1이 빨강으로 변하는 것을 보아 선택되었다는 것을 확인할 수 있다. tree 구조로 확인하면 더 쉽게 이해할 수 있다.

div
  +-- h5(first-child)
  +-- h5
  +-- h5
div
  +-- h5(first-child)
  +-- h5
  +-- h5

h5 태그는 총 6개이지만 div를 기준으로 분할되어있기 때문에 그룹이 2개로 나누어져있다고 볼 수 있다. 따라서 그룹마다 첫 번째 태그가 first-child가 되어 선택되는 것을 알 수 있다.

:first-child 로 선택되려면 반드시 해당 영역의 첫 번째에 위치해야 한다. h5 중에서 처음인 경우가 아니라 영역 내 태그 중 처음이어야 한다.

:last-child

last-child 상태는 그룹의 마지막 요소를 선택하기 위한 선택자이다. first-child의 예제를 변경하여 살펴보도록 한다.

tree 구조로 살펴보면 각각 div 그룹의 마지막 h5 요소가 last-child로 선택된다는 것을 확인할 수 있다.

div
  +-- h5
  +-- h5
  +-- h5(last-child)
div
  +-- h5
  +-- h5
  +-- h5(last-child)

:last-child 로 선택되려면 반드시 해당 영역의 마지막에 위치해야 한다. h5 중에서 마지막인 경우가 아니라 영역 내 태그 중 마지막이어야 한다.

:nth-child()

nth-child 상태는 그룹의 원하는 순서의 요소를 선택하기 위한 선택자이다. 패턴을 통해 반복적으로 선택도 가능하다.

tree 구조로 살펴보면 각각의 그룹에서 nth-child(2)에 해당하는 2번째 요소들이 선택되는 것을 확인할 수 있다.

div
  +-- h5 : nth-child(1)
  +-- h5 : nth-child(2) - 2번째 요소
  +-- h5 : nth-child(3)
div
  +-- h5 : nth-child(1)
  +-- h5 : nth-child(2) - 2번째 요소
  +-- h5 : nth-child(3)

패턴을 부여하여 홀수 또는 짝수 번째의 태그 선택도 가능하다.

tree 구조를 통해 살펴보면 n이 1, 2, 3, 4로 변할 때 2n은 2, 4, 6, 8이므로 짝수 번째의 요소들이 선택되는 것을 확인할 수 있다.

div
  +-- h5 : nth-child(1)
  +-- h5 : nth-child(2) - n=1일 때 선택
  +-- h5 : nth-child(3)
  +-- h5 : nth-child(4) - n=2일 때 선택
div
  +-- h5 : nth-child(1)
  +-- h5 : nth-child(2) - n=1일 때 선택
  +-- h5 : nth-child(3)
  +-- h5 : nth-child(4) - n=2일 때 선택

:not()

not 상태는 특정 요소를 제외하기 위한 선택자이다. () 내부에 제외하고 싶은 내용에 대한 선택자를 기입하여 사용한다.

:hover

hover 상태는 마우스가 올라간 상태일 경우를 선택하는 선택자이다. 마우스가 올라간 경우에만 적용되기 때문에 컴포넌트를 강조하는 용도로 자주 사용된다.

:focus

focus 상태는 입력이 가능한 상태일 경우를 선택하는 선택자이다. 입력이 가능해야 하므로 input, textarea 등 입력 도구에서 사용한다.

:checked

checked 상태는 체크가 되어있는 상태일 경우를 선택하는 선택자이다. 체크박스나 라디오와 같이 체크가 가능한 컴포넌트에서 사용한다. 또한 연계 선택자를 이용하여 체크 여부에 따라 인접 태그에 효과를 부여할 수 있다.

Previous색상(color)Next스타일 우선순위

Last updated 3 years ago