[HTML, CSS] - CSS 선택자

 

---

---

 

선택자

CSS를 적용할 위치의 HTML 요소

 

 

 

전체 선택자

* {
	margin: 0;
	padding: 0;
}

HTML 문서 내부의 모든 요소에 같은 CSS 속성을 적용

보통 margin이나 padding 등 브라우저 기본 스타일들을 초기화 할 때 사용

하지만 문서 내의 모든 요소를 읽어야 하기에 페이지 로딩 속도가 느려질 수 있으므로 최소한으로 사용하는 것이 좋음

 

#wrapper * {
	border: 1px solid #000;
}

전체 선택자는 위의 경우처럼 자식 선택자에도 사용 가능

 

 

 

태그 선택자

태그 선택자는 HTML 요소를 직접 지칭

해당 선택자와 같은 이름을 가진 태그 전부에 속성 적용

태그이름 { 속성1: 속성값1; 속성2: 속성값2; }

div {
	background-color: #000;
	color: #fff;
}

<!-- HTML -->
<div>tag a</div>
<div>tag b</div>
<p>tag c</p>

 

 

 

id 선택자

선택하려는 속성값 앞에 #을 붙여서 작성

어떤 요소에 대해 유일한 특정을 정의

HTML 문서 내 원칙적으로 하나의 객체에만 적용

#아이디{ 속성1:속성값; 속성2:속성값; } 

#id-selector1 { background-color: #000; color: #fff; }
#id-selector2 { background-color: blue; color: yellow; }

<!-- HTML -->
<div id="#id-selector1">id a</div>
<div id="#id-selector2">id b</div>

 

 

class 선택자

같은 class 속성값을 가진 HTML요소를 찾아 선택

선택하려는 속성값 앞에 마침표(.)를 추가해서 작성

여러 객체에 적용

.클래스명{ 속성1:속성값; 속성2:속성값 }

.class-selector1 { background-color: #000; color: #fff; }
div.class-selector2  { background-color: blue; color: yellow; }

<!-- HTML -->
<div class=".class-selector1">class a</div>
<div class=".class-selector2">class b</div>
<p class=".class-selector2">class c</p>

첫 번째 스타일 규칙 : class-selector1 속성값을 가진 요소 모두에 CSS 속성이 적용

두번째 스타일 규칙 : 마침표 앞에 태그가 붙었기 때문에 div태그 이름을 가진 범위 안에서 .class-selector2 속성값을 가진 요소를 선택 하기 때문에 HTML 코드의 마지막 태그는 class 속성값이 일치함에도 선택되지 않음

 

class 선택자를 사용할 때 고려할 점

• class 요소 대신 사용할 수 있는 HTML 태그가 이미 있는가?
  • → class는 구조를 대신할 수 없음
• DOM트리 상단에 이미 사용되는 class가 있는지 확인할 것
  • → 같은 스타일을 공유하는 class가 있다면 새로운 class 선택자를 작성하지 말고 함께 사용

 

id 선택자 vs class 선택자

id	class
단 한 번 유일하게 적용될 스타일	한 페이지 내에서 여러 번 반복되는 스타일
웹 문서 안에서 요소의 배치 방법을 지정	나중에 다른 곳에서도 적용할 수 있는 스타일을 지정
class보다 우선으로 적용되어야 할 스타일	속성값을 두 개 이상 지정
	한 태그 내에서도 여러 종류의 스타일 규칙을 적용

•  

 

 

복합 선택자

두 개 이상의 선택자 요소가 모인 선택자

 

결합 선택자

부모-자식 요소 간에 적용되는 선택자

태그이름 사이에 공백을 넣은 선택자는 부모 태그 하위에 있는 태그에 스타일을 적용

태그 이름, 아이디, 클래스 모두 사용 가능 

>  선택자의 경우 공백을 넣은 것과 비슷하지만, 두 태그 사이에 다른 태그가 없는, 순수 부모-자식 태그간의 관계

선택자1 선택자2 { 속성1:속성값; 속성2:속성값; }

• 하위(자손) 선택자
  • 부모 요소에 포함된 모든 하위 요소에 스타일을 적용
  • 해당 요소의 하위 요소 중에서 특정 타입의 요소를 모두 선택
• 자식 선택자
  • 부모의 바로 아래 자식 요소에만 스타일을 적용
  •  해당 요소의 바로 밑에 존재하는 하위 요소 중에서 특정 타입의 요소를 모두 선택

 

동위 선택자

동위 관계에 있는 요소 중에서 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택

HTML 문서 내에 먼저 등장하는 요소를 ‘형’, 후에 이어지는 요소를 ‘동생’이라고 지칭

두 선택자 모두 ‘형’ 요소는 대상으로 하지 않음

• 인접 형제 선택자
  • 해당 요소와 동위 관계
  • 요소의 바로 뒤에 존재하는 특정 타입의 요소를 모두 선택
• 일반 형제 선택자 (일반 동위 선택자)
  • 해당 요소와 동위 관계
  • 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택

 

다중 조건 선택자

 

 AND 연산

선택자 사이에 공백이 제거되는 경우 여러 선택자를 동시에 만족하는 태그에 스타일을 적용

태그이름#아이디 { 속성1:속성값; 속성2:속성값; } 
태그이름.클래스명 { 속성1:속성값; 속성2:속성값; }
.클래스명#아이디 { 속성1:속성값; 속성2:속성값; }

 

OR 연산

쉼표 (,)를 통해 두 선택자 중 하나라도 만족시 적용

#아이디, .클래스명{ 속성1:속성값; 속성2:속성값; } 
태그이름, .클래스명{ 속성1:속성값; 속성2:속성값; } 

 

 

속성 선택자

태그 안의 특정 속성이나 속성 값을 가지고 있는 HTML 요소를 선택해 스타일을 지정

속성 값의 조건에 따라 다양한 스타일을 지정할 수 있기 때문에 활용도가 높은 스타일 지정 방식

클래스나 아이디의 지정 없이도 스타일을 적용할 HTML 요소를 손쉽게 선택 가능

 

기본 속성 선택자

- [속성이름] 선택자

특정 속성을 가지고 있는 요소를 모두 선택

    [attr] 선택자 : attr라는 속성을 가진 요소를 모두 선택

 

- [속성이름="속성값"] 선택자

특정 속성을 가지고 있으며, 해당 속성의 속성값까지 일치하는 요소를 모두 선택

    [attr=”value”] 선택자 : attr라는 속성의 값이 정확히 value인 요소를 모두 선택

 

문자열 속성 선택자

HTML 요소가 가지고 있는 특정 속성의 속성값 내에 특정 문자열을 확인하여 선택

 

- [속성이름~="속성값"] 선택자

특정 속성의 속성값에 특정 문자열로 이루어진 하나의 단어를 포함하는 요소를 모두 선택 (공백 무시)

하이픈(-) 등으로 연결된 단어는 하나의 단어로 인식하므로, 대상이 되지 않음

• title 속성값이 "first h2"인 요소와 "first p"인 요소만 선택됩니다.
• title 속성값이 "first-p"인 요소는 선택되지 않습니다.

 

- [속성이름|="속성값"] 선택자

특정 속성의 속성값이 특정 문자열로 이루어진 하나의 단어로 시작하는 요소를 모두 선택

title 속성값이 정확히 동일하거나 하이픈으로 연결된 요소만 선택

• title 속성값이 "first-p"인 요소만 선택됩니다.
• title 속성값이 "first h2"나 "first p"인 요소들은 선택되지 않습니다.

 

- [속성이름^="속성값"] 선택자

특정 속성의 속성값이 특정 문자열로 시작하는 요소를 모두 선택

속성값이 특정 문자열로 시작하면 모두 선택

•  title 속성값이 "first"로 시작되는 요소가 모두 선택

 

- [속성이름$="속성값"] 선택자

특정 속성의 속성값이 특정 문자열로 끝나는 요소를 모두 선택

속성값이 특정 문자열로 끝나기만 하면 모두 선택

• title 속성값이 "first"로 끝나는 요소가 모두 선택

 

- [속성이름*="속성값"] 선택자

 특정 속성의 속성값에 특정 문자열를 포함하는 요소를 모두 선택

속성값이 특정 문자열를 포함하기만 하면 모두 선택

•  title 속성값에 "first"를 포함하는 요소가 모두 선택

 

 

가상(추상) 클래스 선택자

선택자 뒤에 :가상이벤트를 붙여 특정 이벤트마다 적용 할 스타일 설정

웹 문서 내에 실제로 존재하는 요소에 특정 이벤트나 환경에 맞춰 가상으로 클래스를 지정해 CSS로 제어

 

링크 선택자와 동적 선택자

링크 선택자 : 링크 요소들의 방문 상태에 따라 스타일을 지정

동적 선택자(active, hover, focus) : 스크립트 없이도 가벼운 마우스 이벤트를 처리

• element:link : 방문하지 않은 링크 요소 선택
• element:visited : 방문한 링크 요소 선택
• element:active : 요소에 마우스 클릭 또는 키보드 엔터가 눌린 동안 선택
• element:hover : 요소에 마우스가 올라가 있는 동안 선택
• element:focus : 요소에 포커스가 머물러 있는 동안 선택

 

구조적 가상 클래스 선택자

구조적 가상 클래스 선택자는 위치를 기준으로 삼아 요소의 순번에 따라 다른 스타일을 지정할 수 있도록 지원

• :root : 문서의 최상위 요소(html)를 선택
• element:nth-child(n) : 앞에서부터 지정된 순서 n과 일치하는 자식 요소 선택
• element:nth-last-child(n) : 뒤에서부터 지정된 순서 n과 일치하는 자식 요소 선택
• element:nth-of-type(n) : 요소의 타입과 일치하는 자식 요소 중 앞에서부터 지정된 순서 n과 일치하는 요소 선택
• element:nth-last-of-type(n) : 요소의 타입과 일치하는 자식 요소 중 뒤에서부터 지정된 순서 n과 일치하는 요소 선택
• element:first-child : 첫 번째 등장하는 자식 요소 선택
• element:last-child : 마지막에 등장하는 자식 요소 선택
• element:first-of-type : 요소의 타입과 일치하는 자식 요소 중 첫 번째 요소 선택
• element:last-of-type : 요소의 타입과 일치하는 자식 요소 중 마지막 요소 선택
• element:only-child : 대상으로 지정한 요소가 형제 없이 유일할 경우 선택
• element:only-of-type : 대상으로 지정한 요소가 동일한 유형의 형제가 없을 경우 선택
• element:empty : 요소 내의 콘텐츠가 비워진(공백X) 경우 선택자로 사용

 

 

가상 요소 선택자

웹 문서 내에 실제로 존재하지 않는 가상의 요소를 만들어 스타일을 주는 것

가상 클래스 선택자(:) 와의 구분을 위해 이중콜론(::) 사용을 권장

• element::before : 지정된 요소의 앞에 가상 요소 생성
• element::after : 지정된 요소의 뒤에 가상 요소 생성
• element::first-letter : 지정된 요소의 첫 번째 글자에 스타일 적용
• element::first-line : 지정된 요소의 첫 번째 줄에 스타일 적용

 

 

그 외 선택자들

• 언어 선택자
  • element:lang(ko) : HTML lang 속성의 값이 ‘ko’로 지정된 요소 선택
• 부정 선택자
  • element:not(s) : s가 아닌 요소를 선택
  • not()의 괄호 안에는 태그 선택자, 아이디 선택자, 클래스 선택자, 가상 선택자 등 다양한 선택자 모두 사용 가능
  • 아래의 예시는 마지막 li 요소를 제외한 모든 li 요소에 밑줄을 추가하게 되면서 요소들 사이사이에 밑줄이 들어간 것 같은 표현

li:not(:last-child) {
	border-bottom: 1px solid #ccc;
}

• UI 요소 상태 선택자
  • element:enabled : 사용 가능한 form(input, textarea, select, button) 요소 선택
  • element:disabled : 사용 불가능한 form(input, textarea, select, button) 요소 선택
  • element:checked : 선택된 form(input checked=”checked”) 요소 선택

 

 

---

 

CSS 선택자 우선순위

1) 점수가 높은 선언

2) 동점일 경우 가장 마지막에 작성된 선언

 

단일 선택자 방식

1. !important
2. 인라인 스타일
3. ID 선택자
4. CLASS 선택자, 속성 기반 선택자, 가상 클래스, 가상 요소
5. 태그 선택자
6. 전체 선택자, 부정 선택자

 

복합 선택자

결합되는 선택자 방식의 정해진 점수를 합산하여 점수가 높은 순서

 

• !important : ∞점
  • !important를 속성 값 옆에 작성하게 되면, 해당 속성의 우선순위가 가장 높게 부여된다.
  • 다른 선언들을 덮어버릴 수 있기 때문에 단순히 우선순위를 높이기 위해 사용을 남발해서는 안된다.

div {
	background-color: #000!important;
}

• 인라인 스타일 : 1000점
  • html 문서 내부 태그에 style 속성을 직접 작성하는 방식
  • 별도의 css 파일에서 작업을 했더라도 !important를 사용하지 않는 이상 인라인 방식의 우선순위를 역전 불가능

<div><span style="font-size: 20px;">hello</span>
</div

• ID 선택자 : 100점

#wrapper {
	background-color: #000;
}

• CLASS 선택자 : 10점

.wrapper {
	background-color: #000;
}

• 속성 기반 선택자 : 10점

input[type="text"] {
	width: 150px;
	background-color: green;
}

• 가상 클래스 : 10점

button:hover {
	color: #fff;
	background-color: #000;
}

• 가상 요소 : 10점

section::before {
  content: "before";
}

• 태그 선택자 : 1점

p {
	font-size: 24px;
}

• 전체 선택자 : 0점

* {
	margin: 0;
	padding: 0;
}

• 부정 선택자 : 0점

li:not(:last-child) {
	border-bottom: 1px solid #ccc;
}

 

 

 

---

 

https://ofcourse.kr/css-course/%EB%8B%A4%EC%A4%91-%EC%A1%B0%EA%B1%B4-%EC%84%A0%ED%83%9D%EC%9E%90

https://www.tcpschool.com/html/html_expand_css

https://mizzu-log.vercel.app/css-selector#f016721ecb6e4fc3a841bab52d207867

https://ofcourse.kr/css-course/id-class-%EC%84%A0%ED%83%9D%EC%9E%90