CSS : CSS 선택자 (CSS Selector)

GPT 생성 이미지

목차

1. CSS 선택자(CSS Selector)
    1-1. 선택자 종류
    1-2. 속성 선택자

    1-3. 여러 선택자에 같은 규칙 적용하기
    1-4. 여러 조건을 만족하는 요소 선택하기

2. 자식 결합자 (Child Combinator)

3. 자손 결합자 (Descendant Combinator)

4. 가상 클래스 (Pseudo-class)

5. 선택자 잘 사용하기

 

---

1. CSS 선택자 (CSS Selector)

CSS 규칙에서 맨 앞에 적어주는 것으로, 작성하는 규칙을 어떤 요소에 적용할 지 선택한다.

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

 

 

1. 선택자 종류

선택자를 작성하는 방식은 크게 4가지가 있다.

• 전체 선택자 : 페이지의 모든 요소에 스타일 지정 (브라우저 기본 스타일 초기화할 때 많이 사용함)
  * 로 작성
• 타입 선택자 : 해당하는 html 태그에 스타일 지정
  태그명 으로 작성
• id 선택자 : 해당하는 id를 속성으로 지닌 태그에 스타일 지정 (페이지당 id는 하나만 가짐)
  #id명 으로 작성
• class 선택자 : 해당하는 class를 지닌 태그에 스타일 지정 (페이지당 class는 여러개 가질 수 있음)
  .class명 으로 작성

// 전체 선택자
* {
	padding: 0;
}

// 태그 선택자
div {
	padding: 10px;
}

// id 선택자 (적용 : <div id="id-name"> )
#id-name {
	padding: 10px;
}

// class 선택자 (적용 : <div class="class-name"> )
.class-name {
	padding: 10px;
}

 

 

2. 속성 선택자

html 속성의 값들을 비교한 결과로 스타일을 지정할 수 있다.

요소 이름[속성명] 의 형태로 사용한다.

연산자	설명	예시
속성명	속성명만 작성할 때 해당 속성을 갖는 요소들을 모두 선택한다.	span[ id ] {     color: red; }
=	값이 정확하게 일치할 때 선택한다.	span[ href="https://example.com" ] {     color: red; }
-=	값이 정확하게 일치할 때 선택한다. 띄어쓰기로 여러 값이 지정된 요소도 선택한다.	span[ class-="coding" ] {     color: red; }
|=	값이 일치하거나 값 뒤 -(하이픈)을 작성할 때도 선택한다. (html, html-basic, html-advanced)	span[ class|="html" ] {     color: red; }
^=	접두사로 값을 가질 때 선택한다. (test, testing, test-case)	span[ class^="test" ] {     color: red; }
$=	접미사로 값을 가질 때 선택한다. (unit-test, latest, endtest)	span[ class$="test" ] {     color: red; }
*=	값이 포함된 모든 요소를 선택한다. (_javascript_, introjavascript, javascript-basic)	span[ class*="javascript" ] {     color: red; }

 

3. 여러 선택자에 같은 규칙 적용하기

콤마( , )로 선택자를 여러 개 작성하여, 여러 선택자에 같은 규칙을 적용할 수 있다.

선택자1,
선택자2 {
	...
}
/* 실제 예시 */
h1, h2, p {
	margin: 0;
}

 

4. 여러 조건을 만족하는 요소를 선택하기

여러 조건을 동시에 만족하는 요소를 선택하고 싶을 때,

선택자를 붙여서 작성하여 규칙을 적용할 수 있다.

<h2 id="apple" class="banana pear">사과와 바나나와 배</h2>

#apple.pear { ... }

.banana.pear { ... }

h2#apple.banana.pear { ... }

---

2. 자식 결합자 (Child Combinator)

오른쪽 꺾쇠( > )로 선택자를 이어서 작성한다.

특정 부모 요소의 바로 아래 자식 요소에 규칙을 적용하고 싶을 때 사용한다.

<div class="article">
	<h2>this is article"</h2>
</div>

.article > h2 {
	color: #dd2400;
}

---

3. 자손 결합자 (Descendant Combinator)

스페이스(공백)으로 선택자를 이어서 작성한다.

특정 부모 요소 내부에 있는 요소에 규칙을 적용하고 싶을 때 사용한다.

<div class="article">
	<p> 오늘은 제가 간장새우장을 먹어볼게요."
    	<img src="soysauce-shirimp.png">
    </p>
</div>

 

.article img {
	width: 100%;
}

 

---

4. 가상 클래스 (Pseudo-class)

요소의 본래 모습이 아닌 어떤 상태에 대해 스타일링을 하고 싶을 때 사용한다.

선택자 이름 뒤에 콜론( : )과 상태 키워드를 붙여서 사용한다.

대표적인 상태로 아래의 네 가지가 있다.

• :hover - 마우스를 올렸을 때
• :active - 클릭한 상태
• :visited - 방문한 적이 있는 링크
• :focus - 포커싱 됐을 때

a {
	font-weight : 100;
}

a:hover {
	font-weight : 900;
    color : red;
}

 

---

5. 선택자 잘 사용하기

단순하게 작성하기

선택자의 조합 방법을 위에서 알아봤지만, 선택자는 결합을 하지 않고 최대한 단순하게 사용하는 것이 좋다.

나중에 코드를 고칠 때 결합으로 꼬여있으면 수정이 어렵기 때문이다.

따라서  클래스와 가상 클래스 위주로 사용하면 좋다.

 

전체 선택자 *

* 선택자는 모든 요소에 규칙을 적용하는 선택자이다.

* {
	box-sizing: border-box;
}

.section * {
	color: gray;
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

참고

codeit