[CSS] CSS 선택자

in Web Basic on Css
[CSS] CSS 선택자

CSS 선택자에 대해서 알아본다.

1. 개요

CSS의 선택자의 종류는 크게 5가지 종류가 있습니다.

  • 기본
  • 복합
  • 가상클래스
  • 가상요소
  • 속성

2. 기본

기본 선택자의 종류는 다음과 같습니다.

  • 전체 선택자 (Universal Selector)
  • 태그 선택자 (Type Selector)
  • 클래스 선택자 (Class Selector)
  • 아이디 선택자 (ID Selector)

2-1. 전체선택자

* 아스타로 표현하며 전체 요소를 지정합니다.

* {
  color : red;
}

See the Pen css selector base Universal Selector by Jung Hun (@manbalboy) on CodePen.

2-2. 태그 선택자

태그 네임으로 시작하며 태그를 선택합니다.

/* li 요소 선택자 */
li {
  color : red;
}

See the Pen css selector tag selector by Jung Hun (@manbalboy) on CodePen.

2-3. 클래스 선택자

.name 으로 이루어져 있으며 class 안의 속성을 찾습니다.

/* class 의 이름이 orange 인 요소 선택자 */
.orange {
  color : orange;
}

See the Pen css class class selector by Jung Hun (@manbalboy) on CodePen.

2-4. ID 선택자

#ID 로 검색

#orange {
  color: orange;
}

See the Pen css selector id by Jung Hun (@manbalboy) on CodePen.

2.복합선택자

복합선택자는 기본선택자를 조합하여 사용하는 선택자 입니다. 종류는 다음과 같습니다.

  • 일치선택자 (Basic Combinator)
  • 자식선택자
  • 하위(후손)선택자
  • 인접 형제 선택자
  • 일반 형제 선택자

2-1. 일치선택자 (Basic Combinator)

기본선택자1기본선택자2 -> 선택자 1과 선택자 2를 동시에 만족하는 요소를 선택

/* span 태그중 orange 클래스를 가진 태그만 적용 */
span.orange {
  color : red;
}

See the Pen css Basic Combinator by Jung Hun (@manbalboy) on CodePen.

2-2. 자식선택자 (child combinator)

기본선택자1 > 기본선택자2 -> 선택자 1의 자식요소 선택

ul > .orange {
  color : red;
}

See the Pen child combinator by Jung Hun (@manbalboy) on CodePen.

2-3. 하위(후손)선택자 (descendant combinator)

선택자1 선택자2 -> 띄어쓰기가 선택자의 기호이며 하위요소를 선택

div .orange {
  color : red;
}

See the Pen descendant combinator by Jung Hun (@manbalboy) on CodePen.

2-4. 인접 형제 선택자 (Adjacent Sibling combinator)

선택자1 + 선택자2 -> 선택자1의 다음 형제 요소 XYZ를 선택

  .orange + li {
    color : red;
  }

See the Pen Adjacent Sibling combinator by Jung Hun (@manbalboy) on CodePen.

2-5. 일반 형제 선택자 (General Sibling combinator)

선택자1 ~ 선택자2 -> 선택자1 다음 형제 요소 모두를 선택

.orange ~ li {
  color : red;
}

See the Pen General Sibling combinator by Jung Hun (@manbalboy) on CodePen.

3.가상 클래스 (Pseudo-Classes)

선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 합니다.

  • :link - 방문한적이 없는 링크
  • :visited - 방문한 적이 있는 링크
  • :hover - 마우스를 롤오버 했을 때
  • :active - 마우스를 클릭했을 때
  • :focus - 포커스 되었을 때 (input 태그 등)
  • :first - 첫번째 요소
  • :last - 마지막 요소
  • :first-child - 첫번째 자식
  • :last-child - 마지막 자식
  • :nth-child(2n+1) - 홀수 번째 자식
  • :not - 부정선택자

사용법

.some-box:hover{ background-color: red; }
input.no-border:focus{ border: none }
.container-box:last-child{ margin-right: 0; }

See the Pen Pseudo-Classes by Jung Hun (@manbalboy) on CodePen.

4.가상요소(Pseudo-Elements)

가상요소는 document tree에 존재하지 않은 것을 생성할 때 사용하는 것

  • ::after
  • ::before
  • ::first-letter
  • ::first-line

See the Pen Pseudo-Elements by Jung Hun (@manbalboy) on CodePen.

4.속성(attribute)

[속성이름=속성값] 의 형태로 속성을 가지고 있는 요소 선택

[disabled] {
  color : red;
}

© 2021. All rights reserved.