2.2.2.1. 전체 선택자(Universal Selectors)
CSS Level 2 선택자
CSS를 적용할 대상으로 HTML 문서 내부의 모든 요소를 선택합니다. 별표(*)로 나타냅니다.
별표는 간단한 선택기로 선택 사항입니다. 예를 들어, *.warning와 .warning 은 동일합니다.
-
기본 예시
-
응용 예시
CSS 선택자 level 1, 2 part1 - by. UXKM
요약 설명CSS 선택자 level 1, 2 part-1 에서는
- CSS 선택자 우선순위 (specificity 계산)
- 기본 선택자(Basic Selectors)
- 그룹 선택자(Grouping selectors)
에 대한 내용을 다루고 있습니다.선택자는 보통 스타일링하고 싶은 HTML 요소나 부여한 ID 혹은 class가 위치합니다.
선언부에 여러개의 속성과 속성값이 있을때는 ;(세미콜론)으로 구분합니다.
각각의 선언은 속성과 속성값을 :(콜론)으로 구분합니다.
CSS는 기본적으로 선언된 순서에 따라 적용되지만 각종 선택자와 삽입 위치에 따라 우선순위가 달라질 수 있습니다.
선택자 우선순위는 !important > 인라인 스타일 > 아이디 선택자 > 클래스/속성/가상 선택자 > 태그 선택자 > 전체 선택자 로 적용됩니다.
2.2.1. CSS 선택자 우선순위 (specificity 계산)
더 특정적인 선택자가 더 일반적인 선택자보다 우선합니다. 가상 엘리먼트와 가장클래스들은 각각 일반적인 엘리먼트와 클래스와 같이 간주됩니다.
3개의 숫자를 결합한 게 셀렉터의 상세도입니다. (large base의 숫자 시스템을 기반으로 합니다)
CSS Selector의 조합에 따라서 셀렉터의 우선순위가 바뀔 수 있으며, 셀렉터의 우선순위를 잘 지정한다면 한 셀렉터를 다방면으로 효율적이게 활용할 수 있게 됩니다.
부정 의사 클래스 안의 셀렉터도 다른 셀렉터와 동일하게 셉니다. 그러나, 부정 의사 클래스 자신은 의사 클래스로 세지 않습니다.
셀렉터의 우선순위를 계산하는 방법은 아래와 같습니다.
- 셀렉터 중 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
2.2.2. 기본 선택자(Basic Selectors)
요약 설명
자주 사용하는 선택자로 CSS기초지식을 배움으로서 알아가야 할 단계입니다.
기본 선택자에는 전체 선택자(Universal Selectors), 타입 선택자(Type Selectors),
아이디 선택자(ID Selectors), 클래스 선택자(Class Selectors)로 구분지을 수 있습니다.
2.2.2.2. 타입 선택자(Type Selectors)
CSS Level 1 선택자
타입 선택자(Type Selector)는 h1, p, div, span 등 HTML 요소(Element)를 선택하는 선택자입니다.
2.2.2.3. 아이디 선택자(ID Selectors)
CSS Level 1 선택자
아이디 선택자(ID Selector)는 특정 값을 id 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다. 속성값 앞에 #을 붙여 아이디임을 나타냅니다.
2.2.2.4. 클래스 선택자(Class Selectors)
CSS Level 1 선택자
클래스 선택자(Class Selector)는 특정 값을 class 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다. 속성값 앞에 .을 붙여 클래스임을 나타냅니다.
2.2.3. 그룹 선택자(Grouping selectors)
요약 설명
그룹 선택자(Grouping selectors)는 모든 선택자를 콤마(,)로 조합하여 그룹으로 지어 작성할 수 있습니다.