CSS 선택자 정리

Flex·2022년 2월 16일
HTML/CSS/JS
0

CSS 모음

목록 보기
2/14
post-thumbnail

선택자 = 셀렉터 = Selector
정리 문서라 양이 상당합니다. 오른쪽 목차를 사용하시면 편해요! 😉

CSS Selector

CSS 선택자 : CSS 규칙을 적용할 요소를 정의한다.
부모, 부모의 형제, 부모 형제의 자식을 선택할 수 있는 선택자는 존재하지 않는다.

  • CSS 스타일링만을 위해서 공부하는 것이 아니고,
    추후 JavaScript 에서 동적인 요소를 추가하거나 Event Listener 등을 붙일 때 필요한 지식들이다.
    ❗️ 익히는데 시간이 오래 걸리더라도 집중해서 알아보도록 하자 👍🏻

  • 최소한 다른 개발자가 써놓은 CSS 파일은 해석할 수 있어야 한다.
    물론 본인이 능숙하게 사용할 수 있다면 더 좋다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors

Type Selector

Type 선택자 : html 의 태그명을 선택자로써 스타일을 지정한다.

  • 연결된 html 문서에 있는 모든 요소들에 스타일을 적용한다.
    🚫 하나의 태그에 스타일을 적용하고싶을 때 사용하는것이 아니다.

  • 전체 적용이기 때문에 일반적으로 CSS 파일 가장 상단에 먼저 작성한다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/Type_selectors

ID Selector

ID 선택자 : 전역 속성 중 특정 id 값을 갖고 있는 요소에 스타일을 지정한다.

  • id 속성은 html 문서 내에서 중복 없이 유일한 값을 갖기 때문에 특정 요소를 선택 가능하다.

  • #아이디명 {...} 형식으로 작성한다.

Example

#welcome-title {
  color: red;
}

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/ID_selectors

Class Selector

Class 선택자 : 전역 속성 중 특정 class 값을 갖고 있는 요소에 스타일을 지정한다.

  • class 속성은 태그마다 중복되어 값을 가질 수 있다.
    같은 클래스명을 가진 요소들을 그룹으로 묶어 스타일을 지정할 수 있다.

  • .클래스명 {...} 형식으로 작성한다.

  • 하나의 태그가 여러 클래스를 가질 수 있기 때문에 Cascading 원칙을 따른다.
    ✅ CSS style 중 가장 마지막에 선언된 스타일이 덮어씌워진다.

Example

.blue {
  color: blue;
}

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/Class_selectors

Attribute Selector

Attribute Selector (속성 선택자) : 주어진 속성의 존재 여부나 그 값에 따라
요소에 스타일을 지정한다.

  • 각 태그마다의 속성을 찾아 스타일을 적용시킬 수 있다.

사용법

  1. [attr] : attr 이라는 이름의 특성을 가진 요소를 선택한다.

  2. [attr=value] : attr 이라는 이름의 특성값이 정확히 value 인 요소를 선택한다.

  3. [attr^=value] : attr 이라는 특성값을 가지고 있으며,
    접두사로 value 가 값에 포함되어 있으면 이 요소를 선택한다.

  4. [attr$=value] : attr 이라는 특성값을 가지고 있으며,
    접미사로 value 가 값에 포함되어 있으면 이 요소를 선택한다.
    ✅ 접두사는 캐럿(^) 문자, 접미사는 달러($) 문자!!

  5. [attr*=value] : attr 이라는 특성값을 가지고 있으며,
    값 안에 value 라는 문자열이 적어도 하나 이상 존재한다면 이 요소를 선택한다.

Example

a[title] {
  color: purple;
}

a[href="https://example.org"] {
  color: green;
}

a[href^="http://"] {
  color: red;
}

a[href$=".com"] {
  color: red;
}

a[href*="example"] {
  color: sienna;
}

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors

Pseudo-Class Selector

Pseudo-Class Selector (가상 클래스 셀렉터) : 선택자에 추가하는 키워드로,
선택한 요소가 특별한 상태여야 만족할 수 있다.

  • 선택자 뒤에 :가상클래스 를 붙여 사용한다.

정적인(Static) 가상 클래스들

문서 내 콘텐츠들에 따라 스타일을 적용시킬 수 있는 가상 클래스들을 알아보자.

1. :first-child

  • :first-child : 선택자 형제 요소 중 제일 첫 요소를 나타낸다.
li:first-child {
	color: green;
}

.movie:first-child {
	font-size: 32px;
}

❗ 반드시 형제 요소 중 첫 요소임을 기억하자.

2. :last-child

  • :last-child : 선택자 형제 요소 중 마지막 요소를 나타낸다.
span:last-child {
	color: tomato;
}

❗ 반드시 형제 요소 중 마지막 요소임을 기억하자.

3. :nth-child

  • :nth-child(자연수) : 형제 사이에서의 순서에 따라 요소를 선택한다.
    자연수 외에도 odd (홀수) 혹은 even (짝수) 이 들어갈 수 있다.
li:nth-child(3) {
	text-align: center;
}

4. :first-of-type

  • :first-of-type : 형제 요소 중 자신의 유형과 일치하는 제일 첫 요소를 나타낸다.
p:first-of-type {
	color: blue;
}

5. :last-of-type

  • :last-of-type : 형제 요소 중 자신의 유형과 일치하는 제일 마지막 요소를 나타낸다.
p:last-of-type {
	color: gray;
}

6. :nth-of-type

  • :nth-of-type(자연수/odd/even) : 형제 사이에서의 순서에 따라 타입 일치 요소를 선택한다.
p:nth-of-type(4) {
	font-size: 15px;
}

❗ first/last-of-type 주의점

만약 클래스를 선택자로 지정한다면,
같은 클래스명의 서로 다른 태그들에게 전부 스타일이 적용되어버리는 점을 유의하자!

Q) first/last-child 와 first/last-of-type 은 뭐가 다른가요? 🤔

A) 해당 요소를 찾아가는 과정 자체가 다릅니다.

  • first/last-child : 형제 요소들을 찾는다 --> 가장 첫 요소를 찾는다 --> 태그가 일치하면 스타일을 적용시킨다.
  • first/last-of-type : 형제 요소들을 찾는다 --> 태그끼리 묶는다 --> 각 묶음의 가장 첫 요소에 스타일을 적용시킨다.

7. :not(selector)

  • :not(selector) : 입력된 selector 를 제외한 나머지 요소에 스타일을 적용시킨다.
input:not(.pw) {
	background-color: indianred;
}

동적인(Dynamic) 가상 클래스들

사용자의 직접적인 동작에 따라 스타일을 적용시킬 수 있는 가상 클래스들을 알아보자.

  • :link : 하이퍼링크에 적용시킬 수 있는 요소로써,
    href 속성을 가진 <a>, <area>, <link> 중 방문하지 않은 모든 요소를 선택한다.

  • 링크 태그는 User Agent (웹 브라우저) 방문 기록에 따라 다음 두가지의 상태로 나뉘어진다.
    1) 웹사이트를 유저가 방문한 적이 없음
    2) 웹사이트를 유저가 한번이라도 방문한 적이 있음

a:link {
	color: crimson;
}

2. :visited

  • :visited : 사용자가 방문한 적이 있는 링크를 나타낸다.
a:visited {
	color: yellowgreen;
}

3. :hover

  • :hover : 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택된다.
input[type=button]:hover {
	background-color: skyblue;
    border: none;
}

4. :active

  • :active : 마우스를 사용하는 경우, 마우스 버튼을 누르는 순간부터 떼는 시점까지를 뜻한다.
    즉, 누르고 있는 동안 적용된다.
input[type=button]:active {
	background-color: teal;
}

Cascading 에 따라 링크를 적절히 디자인하려면??

LVHA-순서 (:link — :visited — :hover — :active) 를 따라서 디자인하자.

5. :focus

  • :focus : 양식의 입력 칸 등 포커스를 받은 요소를 나타낸다.

  • 사용자가 요소를 클릭 또는 탭하거나, 키보드 Tab 키로 선택했을 때 발동한다.

  • button, link, input 등에서 많이 사용된다.

input:focus {
  background-color: gold;
}

6. :enabled & :disabled

  • :enabled : 모든 활성 요소를 나타낸다.

  • :disabled : 모든 비활성 요소를 나타낸다.

  • 활성 요소란 활성(선택, 클릭, 입력, ...)하거나 포커스를 받을 수 있는 요소를 의미한다.
    반대 상태는 비활성 요소(disabled)이다.

input[type=text]:enabled {
	background-color: skyblue;
}

input[type=text]:disabled {
	background-color: silver;
}

7. :checked

  • :checked : 선택했거나 'on' 상태인 라디오(<input type="radio">),
    체크박스(<input type="checkbox">), 옵션(<option>) 요소를 나타낸다.

  • 활성화 = 사용자가 요소를 체크했거나 선택한 경우
    비활성화 = 체크나 선택을 해제하는 경우

input[type=radio]:checked {
	outline: 3px solid red;
}

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes

  • 더 자세한 사항은 '표준 의사 클래스 색인' 을 살펴보자.

Pseudo-Element Selector

Pseudo-Element Selector (가상 요소 셀렉터) : 선택자에 추가하는 키워드로,
선택한 요소의 일부분에만 스타일을 입힐 수 있다.

  • 선택자 뒤에 ::가상요소 를 붙여 사용한다.
  • 과거 W3C 명세에선 해당 내용이 없었기 때문에 구별하지 않아도 브라우저에서 인식은 가능하나,
    규칙에 따라 단일 콜론(:) 대신 이중 콜론(::)을 사용하여 가상 클래스와 가상 요소를 구별해야 한다.

1. ::before & ::after

  • ::before : 선택한 요소의 첫 자식으로 의사 요소를 하나 생성한다.

  • ::after : 선택한 요소의 맨 마지막 자식으로 의사 요소를 하나 생성한다.

공통사항

  • content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용한다.
  • 디폴트값은 Inline 이다.
  • 하나의 요소로 인식되지 않고, 단순히 꾸미는(decoration) 용도로 취급된다.
    ✅ 드래그를 해도 선택되지 않는다!

Example

.favorite::before {
  content: '⭐';
}

2. ::first-letter & ::first-line

  • ::first-letter : Block 요소의 첫 번째 줄의 첫 글자에 스타일을 적용한다.

  • ::first-line : Block 요소의 첫 번째 줄에 스타일을 적용한다.

  • ❗ ::before 와 함께 사용하면 content 속성 내용에 스타일이 적용된다.

공통사항

  • 다른 콘텐츠(img 또는 인라인 테이블)가 선행되지 않는 경우에만 스타일을 적용한다.

Example

.lorem::first-letter {
  color: red;
  font-size: 30px;
}

.lorem::first-line {
  color: green;
}

3. ::selection

  • 사용자가 강조 표시한 문서 부분에 스타일을 적용한다.
    ex) 텍스트에서 마우스를 클릭하고 끌기

Example

p::selection {
  color: white;
  background-color: blue;
}

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements

  • 자세한 내용은 '표준 의사 요소 색인' 을 살펴보자.

Selector 결합

다른 선택자와의 '하위', '자식', '형제', '그룹화' 결합 방식을 살펴보자.

1. 하위 결합

  • 두 가지 이상의 선택자를 결합해서 사용한다.

  • 선택자 선택자 {...} : 선택자 내부의 선택자에 모두 스타일을 적용한다.

  • 선택자는 지금까지 알아본 아이디, 클래스명, 태그명 등이 가능하다.

Example

#list li:last-of-type {
  color: red;
}

2. 자식 결합

  • 두 가지 이상의 선택자를 결합해서 사용한다.

  • 선택자 > 선택자 {...} : 선택자 바로 밑에 있는 자식에 스타일을 적용한다.
    --> 하위 결합보다 좁은 범위이다.

Q) 하위 결합과의 차이점이 뭔가요? 🤔

A) 하위 결합은 해당 선택자 내부에 있는 선택자 전체를 보는 반면,
자식 결합은 바로 밑에 있는 선택자만 찾아내어 스타일을 적용합니다.

Example

#list > li:last-of-type {
  color: yellow;
}

3. 형제 결합

  • 형제 결합에는 두가지 방식이 있다.
    --> 일반 형제 선택자 결합 / 인접 형제 선택자 결합

❗ 앞에 있는 선택자는 뒤에 있는 선택자보다 문서의 위에 있어야 한다.

1) 일반 형제 선택자 결합

  • ~ 문자를 사용하여 결합한다.

  • 셀렉터 ~ 셀렉터 {...} : '~' 뒤에 있는 셀렉터는 앞에 있는 셀렉터보다 문서에서 아래에 있어야 한다.

  • 부모만 같다면 형제로 취급되어 스타일이 적용된다.

Example

code ~ .red {
  color: red;
}

2) 인접 형제 선택자 결합

  • + 문자를 사용하여 결합한다.

  • 셀렉터 + 셀렉터 {...} : '+' 뒤에 있는 셀렉터는 앞에 있는 셀렉터보다 문서에서 아래에 있어야 한다.

  • 부모가 같더라도 셀렉터 두 개가 바로 인접한 두 줄에 위치해야 한다.

Example

.red + div {
  background-color: blue;
}

4. 그룹화

  • 여러 선택자를 묶어서 동일한 스타일을 적용할 때 사용한다.

  • , (쉼표)로 그룹화하여 사용한다.

Example

p, span, code {
  color: purple;
}

전체 선택자

전체 선택자 (Universal Selector) * : 모든 형태의 모든 요소를 선택합니다.

  • 사용하게 된다면 CSS 파일의 최상단에 위치하는 것이 좋다.

  • Class 나 ID 선택자에도 원래 앞에 * 이 있지만 숨겨져 있는 것과 같다.
    --> .red = *.red

Example

  • div > * : <div> 태그의 모든 자식 태그들에 스타일을 적용한다.
  • p + * : <p> 태그의 어떠한 인접 태그가 오더라도 스타일을 적용한다.

상속 제어하기

상속 : 자기 자신에게 특정 스타일이 없을 경우 부모로부터 물려받게 된다.
상속이 가능한 속성과 불가능한 속성이 있다.

initial

  • initial : 속성의 초깃값(기본값)을 요소에 적용한다.
    --> 초깃값은 브라우저가 지정한다.

  • 부모 요소로부터 물려받은 상속을 끊어낸다고 생각하면 편하다.

  • 모든 속성에서 사용할 수 있으며, all에 지정할 경우 모든 CSS 속성을 초깃값으로 재설정한다.
    --> all: initial : 해당 요소에 상속된 모든 스타일을 초깃값으로 되돌린다.

Example

.child1 {
  color: initial;
}

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/initial

inherit

  • inherit : 본인의 스타일을 무시하고 부모의 속성을 무조건 상속 받아 적용한다.
    ✅ initial 과 완벽히 반대의 기능!

  • all: inherit : 해당 요소에 상속된 모든 스타일을 부모로부터 상속받은 값으로 되돌린다.

Example

.child2 {
  color: inherit;
}

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/inherit

unset

  • unset : 아래 두가지 경우에 따라 다르게 작동한다.
    1) 부모로부터 상속받을 값이 있을 때 = inherit 으로 상속받는다.
    2) 부모로부터 상속받을 값이 없을 때 = initial 으로 초기화한다.

Example

.child3 {
  all: unset;
}

--> child3 클래스의 부모의 자체 속성을 모두 물려받는다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/unset

우선순위 of Selector

  1. 선언된 곳에 따라 결정된다.
  2. 명시도에 따라 결정된다. (적용범위가 적을수록 명시도가 높은 것! = 더 뚜렷하게 좁혀지는 것)
  3. 코드의 위치에 따라 결정된다. (Cascading)

어떻게 정해질까?

  • html에 직접 선언된 <style> 태그와 <link> 태그 위치에 따라 우선순위가 정해진다.
    ✅ 당연히 아래에 선언된 태그가 덮어씌워진다. = Cascading 원칙에 따라!

  • 가장 강한 우선순위를 가지는것은 태그 내부에 style="" 속성으로 선언된 인라인 스타일이다.
    (!important 제외)

우선순위 관계도
!important >
Inline style >
ID Selector >
Class / Attribute / Pseudo Selector >
Type (tag) Selector >
* Universal Selector >
Inherited style

  • !important 를 추가하면 모든 우선순위에서 최고 단계에 오를 수 있다.
    ❗️ 급박한 상황이 아니라면 사용을 최대한 지양하자.
div {
  color: purple !important;
}

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/Specificity

profile
Flex
💵 오늘을 살자
이전 포스트

CSS 기초 정리

다음 포스트

CSS 폰트 속성 정리

0개의 댓글

관련 채용 정보