CSS 선택자

seokhyun·2024년 1월 8일

CSS 선택자 선택자우선순위

CSS 배우기

목록 보기

2/4

CSS 선택자

CSS의 다양한 선택자에 대해서 알아보고자 한다.
선택자: CSS에서 "선택자(Selectors)"는 HTML 문서의 요소에 스타일을 적용하는 데 사용되는 패턴이나 규칙을 지정하는 방법이다. 선택자는 스타일을 적용하려는 HTML 요소를 선택하는 데 사용된다.

전체 선택자
타입(유형) 선택자
아이디 선택자(#)
클래스 선택자(.)
특성 선택자([])
그룹 선택자(,)
복합 선택자
a. 자손(하위) 선택자( )
b. 자식 선택자(>)
c. 일반 형제 선택자(~)
d. 인접 형제 선택자(+)
가상 클래스 선택자
a. 가상 클래스
b. 구조적 가상 선택자
c. form 관련 가상 클래스 선택자

1. 전체 선택자

universal selector, html을 포함한 HTML 문서 내의 모든 요소를 선택한다.
* (별표, 애스터리스크) 사용하여 선택할 수 있다.

 * {
	margin:0;
	padding:0;
	}

모든 요소들을 선택함

2. 타입(유형) 선택자

태그 선택자, 요소 선택자, type selector
타입 선택자는 html문서를 구성하고 있는 특정 태그를 선택한다.

h1 {
	font-weight:bold;
	}

HTML 내에서 사용된 모든 h1 요소에 적용

3. 아이디 선택자(`#`)

id selector
아이디 선택자로 사용되는 id는 HTML 페이지 내에서 유일해야 하기 때문에 재사용성은 떨어진다. 또한 아이디 속성은 JavaScript 또는 해시 링크와 함께 사용되는 경우가 많다.

<!--HTML-->
<header id="header">
...
</header>
<!--CSS-->
#header {
	padding: 10px;
}

id=header인 요소에만 적용

4. 클래스 선택자(`.`)

class selector
클래스 선택자는 앞서 3번의 아이디 선택자와 다르게 한 HTML 페이지 내에서 여러 개가 존재할 수 있기 때문에 재사용성이 높다. 그래서 CSS로 미리 자주 사용하거나 필요한 클래스를 만들어 놓고 사용하는 경우도 많다.
id, class는 숫자로 시작하면 안 된다. 하이픈(-) 과 언더바(_), 문자로만 시작할 수 있다.

<!--HTML-->
<h1 class="fc-red">hello wolrd</h1>
<p>Lorem ipsum dolor sit amt</p>
<p class="fc-red">Lorem ipsum dolor sit amt</p>
<!--CSS-->
.fc-red {
	color: red;
}

class가 "fc-red"인 요소들에 적용

5. 특성 선택자(`[]`)

주어진 특성을 가진 모든 요소를 선택한다.

[type="button"]{
	border:0;
	cursor:pointer;
}
[class="btn"]{
	color:#fff;
	background: royalblue;
}

type이 button인 요소, class가 btn인 요소 적용

6. 그룹 선택자(`,`)

그룹 선택자는 여러 태그나 요소, 선택자들을 ,를 통해서 그룹으로 한번에 스타일을 지정하는 방법이다.

h1, h2, h3, h4, h5, h6{ font-weight:bold;}

,로 구분 돼 있는 모든 h1~h6 요소에 적용

7. 복합 선택자

a. 자손(하위) 선택자( )

자식, 자손 모두를 선택할 수 있으며 공백, 띄어쓰기( )를 사용한다. 많이 쓰는 선택자이다.

section p {
  border: 3px solid skyblue;
}

section 요소안에 모든 p요소들 적용

b. 자식 선택자(`>`)

>를 통해서 구분하고 선택 요소 기준으로 직계 자손만(바로 아래 범주의 해당 요소)을 선택한다.

section > p{
  color:royalblue;
}

section 요소안에 section요소 기준으로 직계자손에 해당하느 p요소만 적용

c. 일반 형제 선택자(`~`)

~를 통해 구분하며, 선택 요소 기준으로 뒤에 나오는 형제만 선택한다.

section ~ p{
  text-decoration:underline;
}

section 요소를 기준으로 section요소의 뒤에있는 형제중 p요소만 적용

d. 인접 형제 선택자(+)

'+'를 통해서 구분하며, 바로 뒤에 인접한 형제만 선택한다.

section + p{
  background:yellow;
}

section 요소 기준으로 section요소의 형제중에 바로 뒤에있는 p요소만 적용

가상 클래스 선택자

pseudo selectors
선택자에 추가하는 키워드로 선택한 요소가 특별한 상태여야 만족할 수 있다.
가상 클래스란? 실제로 존재하는 요소에 특정 이벤트나 환경에 맞춰 가상으로 클래스를 줘서 css로 제어하는 것을 말한다.

a. 가상 클래스

:link	방문하지 않은 링크
:visited	방문한 링크
:hover	마우스 커서를 올려 놓았을 때
:active	마우스로 클릭했을 때
:focus	포커스 되었을때

a:link {
  color: blue;
}

a요소인데 방문하지 않은 링크일 경우만 적용
다른 선택자를 사용하려면 원하는 조건의 선택자를 골라서 link자리 대신 넣어주면 된다.

b. 구조적 가상 선택자

:first-child: 형제 요소 그룹 중 첫 번째 요소
:last-child :형제 요소 그룹 중 마지막 요소
:nth-child: 형제 사이에서의 순서에 따라 요소를 선택할 수 있음

li:nth-child(2n+1) {
  color: lime;
}

n은 0부터 증가하며, 1,3,5,...이런식으로 li의 해당 인덱스(2n+1)만 적용
안에 수식(+,-)를 이용하여 만들 수 있음
4. :not
li:not(:first-child){
	margin-top:20px;
}
li요소안에 첫번째 요소가 아닌 요소들 적용

c. form과 관련 가상 클래스 선택자

:enabled, :disabled: 활성화 /비활성화 상태일때
:read-only, :read-write: 사용자가 편집할수 없는/있는 상태일 때
:checked: input checkbox radio 유형일때 선택된 상태를 나타냅니다
:required: 필수입력값일 경우
**::placeholder**: 입력에 대한 추가 정보가 있을 경우

CSS 선택자 우선순위

후자우선의 원칙
구체성의 원칙
중요성의 원칙

앞서 CSS 선택자에 대해서 알아보았다. 배운 CSS의 선택자를 사용하다가 오류나 원하지 않는 결과가 나올수도 있다. 이런 경우 대다수의 원인은 CSS의 선택자의 우선순위가 존재해서 그렇다. 가령, 다른 선택자를 사용하여 동일한 요소에 스타일을 선언해주면 어떻게 될까? 이러한 문제가 있을 수 있기 때문에 CSS 선택자가 적용되는 우선순위가 존재하는 것이다.

1. 후자우선의 원칙

동일한 선택자에 동일한 속성이 사용되었을 경우 뒤에 적힌 속성을 따른다.

li:nth-child(2n+1) {
  color: lime;
  color: blue;
}

위의 예제 코드일 경우 후자우선의 원칙으로 해당하는 요소의 color은 blue가 된다.

2. 구체성의 원칙(Specificity: 명시도)

가중치

다른 선택자에 동일한 속성이 사용되었을 경우 더 구체적인 선택자에 적혀있는 속성을 따른다. 우선 가중치의 level이 존재한다. level은 1~4로 존재하는데 아래와 같다. 아래의 선택자중에서 1이 제일 높은 level이고 4로 갈수로 낮은 level이다. 그래서 높은 level에 있는 선택자일 수록 우선순위가 더 높다는 것이다. 가령, inline 스타일 속성과 가상 클래스에서 같은 속성이 사용된다면 inline은 level 1에 위치하고 가상 클래스는 level 3에 위치해 있기 때문에 inline선택자에 포함돼 있는 속성을 따를 것이다.
1. inline 스타일 속성
2. id#
3. class., 가상 클래스, 속성선택자
4. type(tag), 가상요소 선택자
하지만 여기서 끝이 아니다. 만일, 같은 수준의 선택자에서 동일한 속성이 사용된다면 어느 선택자의 속성을 적용할까? 예를들어, 동일한 3수준에 있는 가상 클래스와 속성선택자에서 동일한 속성이 사용된다면 level로 우선순위를 판단하기 힘들다. 이때, 우선 순위 점수 계산이 필요하다.

우선 순위 계산

우선 순위 가중치에 대한 점수는 다음과 같다. 아래있는 표에서 사용한 선택자들을 더해서 합 점수가 더 높은 선택자의 속성을 적용시키면 된다.

inline-style	1000점
id 선택자 #	100점
class ., 가상클래스, 속성선택자	10점
타입, 가상요소 선택자	1점
전체선택자 *	0점

3. 중요성의 원칙

*!important*
이 선언은 예외적으로 다른 CSS의 어떤 선언 보다도 우선한다. 하지만 이를 사용하는 것은 좋지 못한 습관이다. 그 이유는, !important를 한번 사용하는 순간 다른 선택자에서 원하는 속성을 적용시킬 수 가 없게되며, 적용시키려면 또 다시 !important를 사용해야한다. 이렇게 반복이 되면 코드에 !important가 많아지고 더이상 사용할 수 없는 코드가 되버린다. 따라서 사용에 주의해야하며, 사용하지 않는 습관이 가장 바람직하다.

seokhyun

개발자 하고싶어 응애

이전 포스트

CSS 선택자

CSS 배우기

CSS 선택자

1. 전체 선택자

2. 타입(유형) 선택자

3. 아이디 선택자(`#`)

4. 클래스 선택자(`.`)

5. 특성 선택자(`[]`)

6. 그룹 선택자(`,`)

7. 복합 선택자

a. 자손(하위) 선택자( )

b. 자식 선택자(`>`)

c. 일반 형제 선택자(`~`)

d. 인접 형제 선택자(+)

가상 클래스 선택자

a. 가상 클래스

b. 구조적 가상 선택자

c. form과 관련 가상 클래스 선택자

CSS 선택자 우선순위

1. 후자우선의 원칙

2. 구체성의 원칙(Specificity: 명시도)

가중치

우선 순위 계산

3. 중요성의 원칙

CSS 기초, 적용, 상속

0개의 댓글

CSS 선택자

CSS 배우기

CSS 선택자

1. 전체 선택자

2. 타입(유형) 선택자

3. 아이디 선택자(#)

4. 클래스 선택자(.)

5. 특성 선택자([])

6. 그룹 선택자(,)

7. 복합 선택자

a. 자손(하위) 선택자( )

b. 자식 선택자(>)

c. 일반 형제 선택자(~)

d. 인접 형제 선택자(+)

가상 클래스 선택자

a. 가상 클래스

b. 구조적 가상 선택자

c. form과 관련 가상 클래스 선택자

CSS 선택자 우선순위

1. 후자우선의 원칙

2. 구체성의 원칙(Specificity: 명시도)

가중치

우선 순위 계산

3. 중요성의 원칙

CSS 기초, 적용, 상속

0개의 댓글

3. 아이디 선택자(`#`)

4. 클래스 선택자(`.`)

5. 특성 선택자(`[]`)

6. 그룹 선택자(`,`)

b. 자식 선택자(`>`)

c. 일반 형제 선택자(`~`)