전체 선택자(Universal Selectors)
CSS Level 2 선택자로, HTML 문서 내부의 모든 요소를 선택합니다. 별표(*)로 나타내며, 별표는 생략할 수 있어 *.warning와 .warning은 동일합니다.
-
기본 예시
-
응용 예시
CSS 선택자 level 1, 2 part1 - by. UXKM
- Publishing
- CSS
- CSS 초급
- CSS 선택자 level 1, 2 part1
요약 설명선택자는 스타일링하고 싶은 HTML 요소나 부여한
id,class를 지정하는 위치입니다. 선언부에 여러 개의 속성과 속성값이 있을 때는 세미콜론(;)으로 구분하고, 각 선언은 속성과 속성값을 콜론(:)으로 구분합니다.
CSS는 기본적으로 선언된 순서에 따라 적용되지만 각종 선택자와 삽입 위치에 따라 우선순위가 달라질 수 있으며, 선택자 우선순위는 [!important> 인라인 스타일 > 아이디 선택자 > 클래스/속성/가상 선택자 > 태그 선택자 > 전체 선택자] 순으로 적용됩니다.
요약 설명CSS 선택자 level 1, 2 part-1에서는
- CSS 선택자 우선순위(specificity 계산)
- 기본 선택자
- 그룹 선택자에 대해 다룹니다.
CSS 선택자 우선순위 (specificity 계산)
더 구체적인 선택자가 더 일반적인 선택자보다 우선하며, 가상 요소와 가상 클래스는 각각 일반적인 요소와 클래스와 같이 계산됩니다.
선택자의 우선순위는 3개의 숫자(a, b, c)를 조합해서 계산하며, 선택자를 어떻게 조합하느냐에 따라 우선순위가 달라집니다.
선택자의 우선순위를 잘 이해하면 스타일을 효율적으로 관리할 수 있습니다.
선택자의 우선순위를 계산하는 방법은 아래와 같습니다.
- 선택자 중 ID 선택자의 개수를 셉니다 (= a)
- 선택자 중 클래스 선택자, 속성 선택자, 의사(가상) 클래스의 개수를 셉니다 (= b)
- 선택자 중 타입 선택자와 의사 요소의 개수를 셉니다 (= c)
- 전역 선택자(가상 요소)는 무시합니다.
기본적인 선택자 우선순위는 아래와 같습니다.
- 속성 값 뒤에 !important 를 붙인 속성
- HTML에서 style을 직접 지정한 속성
- #id 로 지정한 속성
- .클래스, :추상클래스 로 지정한 속성
- 태그이름 으로 지정한 속성
- 상위 객체에 의해 상속된 속성
같은 우선순위를 가진 선택자가 여러 개 있을 때는, 더 구체적인 선택자(요소를 더 많이 지정한 선택자)가 우선되며, 모든 설정이 같다면 나중에 선언한 스타일이 적용됩니다.
-
* {}
a=0 b=0 c=0 d=0
→ specificity = 0,0,0,0 -
li {}
a=0 b=0 c=0 d=1
→ specificity = 0,0,0,1 -
li:first-line {}
a=0 b=0 c=0 d=2
→ specificity = 0,0,0,2 -
ul li {}
a=0 b=0 c=0 d=2
→ specificity = 0,0,0,2 -
ul ol+li {}
a=0 b=0 c=0 d=3
→ specificity = 0,0,0,3 -
h1 + *[rel=up] {}
a=0 b=0 c=1 d=1
→ specificity = 0,0,1,1 -
ul ol li.red {}
a=0 b=0 c=1 d=3
→ specificity = 0,0,1,3 -
li.red.level {}
a=0 b=0 c=2 d=1
→ specificity = 0,0,2,1 -
#x34y {}
a=0 b=1 c=0 d=0
→ specificity = 0,1,0,0 -
style=""
a=1 b=0 c=0 d=0
→ specificity = 1,0,0,0
- a
- b
- c
- 선택자 우선순위 계산
-
* {}
0
0
0
=
0
-
li {}
0
0
1
=
1
-
ul li {}
0
0
2
=
2
-
ul ol+li {}
0
0
3
=
3
-
li.num {}
0
1
1
=
11
-
ul+ol li.num {}
0
1
3
=
13
-
li.num.last {}
0
2
1
=
21
-
#wrap {}
1
0
0
=
100
-
p#wrap {}
1
0
1
=
101
기본 선택자(Basic Selectors)
요약 설명자주 사용하는 선택자로 CSS 기초 지식을 배우는 단계입니다. 기본 선택자에는 전체 선택자(Universal Selectors), 타입 선택자(Type Selectors), 아이디 선택자(ID Selectors), 클래스 선택자(Class Selectors)로 구분할 수 있습니다.
타입 선택자(Type Selectors)
CSS Level 1 선택자로, <h1>, <p>, <div>, <span> 등 HTML 요소(Element)를 선택하는 선택자입니다.
아이디 선택자(ID Selectors)
CSS Level 1 선택자로, 특정 값을 [id] 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다. 속성값 앞에 #을 붙여 아이디임을 나타냅니다.
클래스 선택자(Class Selectors)
CSS Level 1 선택자로, 특정 값을 [class] 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다. 속성값 앞에 .을 붙여 클래스임을 나타냅니다.
그룹 선택자(Grouping selectors)
요약 설명그룹 선택자(Grouping selectors)는 모든 선택자를 콤마(,)로 조합하여 그룹으로 묶어 작성할 수 있습니다.