선택자(Selector)

✒️ 2025-05-16 12:41 내용 수정

스타일을 적용할 대상을 선택하기 위해 사용하는 것

참고 자료 : TCPSchool CSS 선택자
같은 레벨이라면 마지막에 작성해준 내용이 적용된다.
선택자가 넓은 범위보다 좁은 범위의 우선 순위가 높다.

선택자	설명
`*`	전체 선택자
HTML태그	HTML 선택자
`class="클래스"`	class 선택자, `.클래스`로 접근
`id="아이디"`	id 선택자, `#id명`으로 접근
`name="이름"`	name 선택자
`선택자1, 선택자2, 선택자3`	그룹 선택자
`선택자1 하위선택자1`	자손 선택자
`선택자1 > 하위선택자1`	직계 자손 선택자
`동위선택자 ~ 동위선택자1`	동위 선택자
`동위선택자 + 동위선택자1`	인접 동위 선택자
`선택자[속성]`	지정한 속성 선택

class 선택자(Class Selector)

같은 이름의 태그가 있을 때 구별하기 위한 식별자다.
스타일 변경만을 위해 사용되는 속성이다.
class는 디자인을 위해 만들어졌기에 겹쳐도 상관 없다.
.클래스명 으로 접근할 수 있다.
태그.클래스명으로 같은 클래스를 가진 태그가 여러 개 있다면 특정 태그의 클래스만 적용 시킬 수 있다.
하위 태그를 선택할 때 스페이스로 구분한다.
class="클래스1 클래스2"로 한 번에 두 개 이상의 클래스를 가질 수도 있다.

.my-class.test{}
.home .window{}

표기	설명
`.클래스1.클래스2`	클래스1과 클래스2가 둘 다 있는 요소를 선택
`.클래스1 .클래스2`	클래스1의 하위 태그 중 클래스2인 요소를 선택

<header>
	<style>
		.cls1.cls2{background-color: red;}
		.cls1 .cls2{background-color: yellow;}
	</style>
</header>

<body>
	<!-- red -->
	<div class="cls1 cls2"></div>
	
	<div class="cls1">
		<!-- yellow -->
		<div class="cls2"></div>
	</div>
</body>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style type="text/css">
			p{color:blue}
			p.c1{color:darkgreen}			
			.c1{color:red}
			
			
			h1{color:blueviolet}		
			div.box .h{color:sandybrown}		
			span{color:teal}		
			div.box2 h1 .span1{color:yellow}		
			.span2{color:blue}
		</style>
	</head>
	<body>
		<h1 class="c1">h1 태그의 클래스</h1>
		<p class="c1">p 태그의 클래스</p>
		<p>클래스가 없는 p 태그</p>
		
		<hr>
		
		<div class="box">
			<h1>h1의 <span>이 부분만</span>바꿔줍니다.</h1>
			<h1 class="h">이 h1은 어떻게 바뀔까요.</h1>
			
			<div class="box2">
				<h1>h1의 <span class="span1">이 부분은 위쪽과 다르게</span>바꿔줍니다.</h1>
			</div>
		</div>
		<h1>h1의 <span class=span2>이 부분은 또 다르게</span>바꿔줍니다.</h1>
	</body>
</html>

css 예제2.png

id 선택자(ID Selector)

class와 같은 식별자 속성이다.
클래스와 다르게 나중에 서버로 데이터를 넘겨야 하는 속성이므로 겹쳐지면 안된다.
- 페이지 내에서 1개 번만 사용할 수 있다.(중복 불가)
접근은 #으로 한다.

#my-id{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style type="text/css">
			p{color:blue}
			#id1{color:green}
			#id2{color:darkred}
		</style>
	</head>
	<body>
		<p id="id1">p태그의 id 태그를 테스트합니다.</p>
		<p id="id2">id 태그는 중복되면 안됩니다.</p>
		<p>id 태그가 없다면 색을 이렇게 지정합니다.</p>
	</body>
</html>

css 예제3.png

프론트엔드 팀 프로젝트를 진행하던 중 HTML 문서 템플릿을 반복해서 출력했을 때 같은 id 값을 가진 요소가 여러 개 발생했다.
- Vanilla JavaScript와 JQuery로 HTML 템플릿 문서 가져와서 사용하기 참고.
이 경우 CSS를 id 선택자로 지정해서 적용할 때 전체 적용이 될지 의문이 들어 멘토님께 질문했다.
→ CSS는 선택자로 지정한 대상 전체에 스타일을 적용한다.
→ id 는 문서에서 고유해야 하므로 반복으로 돌려서 중복 요소가 생기는 경우가 있다면 class 로 만들어야 한다.
따라서 반복문으로 돌려야 하는 경우엔 요소를 지정할 때 class를 사용하는 것이 좋으며, Javascript에서 요소를 선택할 때도 getElementByClassName() 또는 querySelector()로 선택하는 것이 좋다.

속성 선택자(Attribute Selector)

참고 자료 : mdn web docs 속성 선택자
특정 속성이 있는 요소를 대상으로 지정하기 위해 사용하는 선택자다.

input[type]
input[type="checkbox"]
input[type~="tel"]

선택자	설명
`선택자[속성]`	지정한 속성 선택
`선택자[속성 = "속성값"]`	특정 속성값을 선택
`선택자[속성 ~= "속성값"]`	특정 속성값을 포함. "-" 연결 단어 적용 X
`선택자[속성 *= "속성값"]`	특정 속성값 포함. 일부라도 포함하면 적용 O
`선택자[속성 ^= "속성값"]`	특정 속성값으로 시작할 때 선택
`선택자[속성 $= "속성값"]`	특정 속성값으로 끝날 때 선택

name 선택자(Name Selector)

form 태그 내의 input 태그의 정보를 서버로 넘길 때 주로 사용하고, form 태그나 form 태그 내의 input 태그를 구별할 수 있도록 해준다.
- HTML#4. form 태그 참고.
id 선택자처럼 name 속성이 겹치면 안된다.
form 태그와 input 태그 외의 다른 태그에서도 사용할 수 있지만, 다른 태그에서는 class나 id와 비슷한 역할만 수행하기에 이런 경우엔 class나 id 선택자를 사용하는 것이 낫다.
document.getElementsByName의 반환은 NodeList 객체다.
- 문서 객체 모델(Document Object Model)#HTML 객체 가져오기 참고

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script>
			function result() {
				let f = document.forms[0];
				
				let text = f.txt.value;
				let pwd = f.pwd.value;
				let checkbox = f.cb.value;
				let button = f.bt.value;
		
				console.log(text);
				console.log(pwd);			
				console.log(checkbox);
				console.log(button);
			}			
		</script>
	</head>
	<body>
		<form>
			<ul>
				<li><input name="txt" value="text"></li>
				<li><input name="pwd" type="password"></li>		
				<li><input name="cb" type="checkbox"></li>
				<li><input name="bt" type="button" value="버튼" onclick="result()"></li>
			</ul>
		</form>
	</body>
</html>

직계 자식 선택자

> : 직계 자식에게만 속성을 적용한다.

ul > li {}

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<style type="text/css">	
		#div1 h1{color:blue;}
		#div1 > h1{color:red;}
	</style>
</head>

<body>
	<div id="div1">
		<h1> div1의 직계자식 h1 </h1> <!--div1의 직계자식-->
		<div id="div2"> <!--div1의 직계자식-->
			<h1> h1 - 2 </h1>
		</div>
		<div id="div3"> <!--div1의 직계자식-->
			<h1> h1 - 3 </h1>
		</div>
	</div>
</body>
</html>

child 예제.png