[CSS] 선택자(selector)와 종류 정리

 

◈선택자(selector)란?

CSS 선택자란 HTML로 마크업 한 파일에서 CSS 스타일을 적용할 요소를 정의하는것 입니다.  말로 풀어쓰니 오히려 더 어려워지는 느낌이어서 예시를 들어보겠습니다.

왼쪽의 예시를 봤을때 색상을 빨간색으로 변경시키는 값을 div라는 요소가 선택자가 되는 것입니다. 이와 같이 스타일이 반영되는 대상이 선택자인 건데, 수만은 태그의 스타일을 변경하기 위해서는 선택자에 대해 이해를 잘하고 있어야 가독성 좋은 파일을 만들 수 있다고 생각합니다.

 

◈선택자(selector) 종류

선택자 유형	사용 예시	설명
태그 선택자	div { 속성:속성값; } → 선택자 : 모든 div 태그의 속성값 변경	html의 특정 태그 이름에 해당하는 요소 선택
전체 선택자 (*)	* { 속성:속성값; } → 모든 전역 속성값 변경	html의 모든 요소 선택
ID 선택자 (#)	#list { 속성:속성값; } → list라는 ID값을 가진 속성값 변경	html의 id 이름을 가진 요소 선택
class 선택자 (.)	.item { 속성:속성값; } → item이라는 class값을 가진 속성값 변경	html class 이름을 가진 요소 선택
일치 선택자	.list.item { 속성:속성값; } → list 클래스와, item 클래스 값을 가진 속성값 변경	선택자 여러개가 동시에 선택 (선택자 사이에 아무것도x)
자식 선택자 (>)	.list > .item { 속성:속성값; } → list 클래스 바로 아래 item 클래스의 속성값 변경	바로 아래 자식요소 선택
하위 선택자 (공백)	.list .item { 속성:속성값; } → list 클래스 안에 item 클래스의 속성값 변경	해당하는 모든 하위 자손 선택 (선택자 사이에 띄어쓰기)
인접 형제 선택자 (+)	.red + .blue { 속성:속성값; } → red클래스 형제 중 html에서 바로 아래작성된 blue클래스의 속성값 변경	앞 선택자 바로 뒤의 형제 요소 하나 선택
일반 형제 선택자 (~)	.red ~ .blue { 속성:속성값; } → red클래스의 형제 중 .blue클래스의 속성값 변경	앞 선택자 뒤에 모든 형제 요소 선택
속성 선택자 [attribute]	a[target] { 속성:속성값; } → a태그 중 target이라는 속성을 가진 스타일 변경	[]안의 속성을 가진 요소 선택 [attr=value] : value에 한글자도 빠지지않은 정확한 값을 입력해야됨 [attr^=value] : value의 값으로 시작하는 속성을 가진 요소 선택 [attr$=value] : value의 값으로 끝나는 속성을 가진 요소 선택 [attr_=value] : value의 값을 처음이나, 끝, 중간 어디든 가지고있는 속성을 가진 요소 선택
속성 선택자 [attr=value]	input[type="text"] { 속성:속성값; } → input태그 중 type이 text인 태그의 속성값 변경
속성 선택자 [attr^=value]	a[href^=https] { 속성:속성값; } → a태그 중 href가 https로 시작하는 태그의 속성값 변경
속성 선택자 [attr$=value]	a[href$=.com] { 속성:속성값; } →a태그 중 href가 .com로 끝나는 태그의 속성값 변경
속성 선택자 [attr*=value]	input[placeholder*=입력] { 속성:속성값; } → input태그 중 placeholder가 입력이라는 단어를 가지고있는 태그의 속성값 변경
그룹화 (,)	span, p { 속성:속성값; } → span과 p태그의 속성값 변경	같은 속성값을 가지려는 태그나 클래스를 ,(쉼표)로 묶어서 작성

 

선택자 종류에 대해 표로 간단하게 작성을 해봤는데, 그중에서 구분이 어려운 선택자들만 예시를 작성하려고 합니다.

 

 

 

▶ 자식 선택자 (>) & 하위 선택자 (공백)

자식 선택자 & 하위 선택자

위의 자식 선택자와 하위 선택자는 class의 유무 이외에는 동일한 코드이다. 동일한 코드와 동일한 속성값을 주었는데 결과는 다른 것을 볼 수 있다. 왜냐하면 자식 선택자는 선택자 기준으로 들여 쓰기가 한번 차이나는 자식에게만 속성값을 주기 때문이다. 하위 선택자는 자신의 자식 요소 이외에 자식의 자식 요소에게도 속성값을 준다. 자식 선택자와 하위 선택자는 둘 다 본인 태그의 안에 작성되어 있는 속성을 변경하기 때문에 div태그의 형제인 span태그도 스타일이 변경되지 않았다.

 

 

 

▶ 인접 형제 선택자 (+) & 일반 형제 선택자 (~)

인접 형제 선택자 & 일반 형제 선택자

이번에도 동일한 코드에서 다른 스타일이 적용되어 있다. 인접 형제 선택자는 형제 중 자신과 가장 가까이에 있는 형제를 말한다. 위의 코드에서 div와 가까운 형제는 p와 span이기에 span 하나만 스타일이 적용되었다. 그리고 일반 형제 선택자는 자신과 형제인 모든 요소들을 말하는데, div 클래스와 형제인 span 클래스는 3개인데 왜 두 개만 변경됐을까? 이유는 선택자보다 html 코드가 나중에 작성된 코드에만 속성값이 적용된다. 그래서 인접 형제 선택자와 일반 형제 선택자 모두 제일 상위 요소 중 (h1코드 바로 아래) span과 div가 있음에도 불구하고 두 span 태그 모두 스타일이 적용되지 않은 것을 볼 수 있다.

 

 

 

 

선택자 중 :first-child, ::before 등의 가상 클래스와 가상 요소 선택자에 대해서는 아래 게시글 참고 바랍니다!☺️

👇☺️👇

2023.03.11 - [front-end] - [CSS] CSS 가상 클래스(:) & 가상 요소(::) 정리