CSS(3) 선택자

전체 선택자

universal selector

html을 포함한 HTML 문서 내의 모든 요소를 선택

*를 사용하여 선택

*{
	margin: 0;
}

 

타입 / 유형 / 태그 선택자

type selector

특정 태그를 선택

h1{
	font-weight: bold;
}
p{
	font-size: 24px;
}

 

아이디 선택자 (#)

id selector

주의) HTML 페이지 내의 id는 유일해야 함

HTML 안에서 한 번만 사용되기 때문에 재사용성은 떨어짐

아이디 속성은 JavaScript 또는 해시 링크와 함께 사용되는 경우가 많음

<header id="hhddrr">
...
</header>

#hhddrr{
	padding: 10px;
}

 

클래스 선택자 ( . )

class selector

클래스 선택자는 한 페이지에 여러 개가 존재 가능

재사용성 높음

<h1 class="worldclass">Hello World</h1>
<p class="worldclass">Lorem ipsum dolor ...</p>

.worldclass{
	color: red;
}

 

특성 선택자 ( [ ] )

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

[type="button"]{
	border:0;
	cursor:pointer;
}
[class="btn"]{
	color:#fff;
	background: royalblue;
}
/* value속성의 값에 val이 포함되는(공백으로 분리된 값이 일치) 요소 */
[value~="val"]{}

/* value속성의 값이 val로 시작되는 요소 */
[value^="val"]{}

/* value속성의 값이 val로 끝나는 요소 */
[value$="val"]{}

/* value속성의 값에 val이 포함되는 요소 */
[value*="val"]{}

 

그룹 선택자 ( , )

h1,
h2,
h3,
p{
	font-weight: bold;
}

 

자손(하위) 선택자 (   )

자식, 자손 모두를 선택 가능

공백, 띄어쓰기를 통해 구분

ex) section p{ } => section내의 모든 p 자손들

 

자식 선택자 (>)

> 를 통해 구분

직계 자손만을 선택

ex) section>p{ } => section의 직계 자식 p

 

일반 형제 선택자 (~)

~ 를 통해 구분

뒤에 나오는 형제만 선택

ex) section~p{ } => section 뒤에 나오는 p 형제들

 

인접 형제 선택자 (+)

+를 통해 구분

바로 뒤에 인접한 형제만 선택

ex) section+p{ } => section 바로 뒤에 인접한 p

---

가상 클래스 선택자

pseudo selectors

선택자에 추가하는 키워드로 선택한 요소가 특별한 상태여야 만족

:link 방문하지 않은 링크

:visited 방문한 링크

:hover 마우스 커서를 올려 놓았을 때

:active 마우스로 클릭했을 때

:focus 포커스 되었을 때

 

구조적 가상 선택자

:first-child 형제 요소 그룹 중 첫번째 요소

:last-child 형제 요소 그룹 중 마지막 요소 (body에는 적용X)

:nth-child(N) 형제 요소 그룹 중 N번째 요소 (N = 2, odd, even, 2n+1 ...)

:not() 부정 선택자 ex) li:not(:fisrt-child){ } => li중 첫번째가 아닌 li

---

CSS 선택자 공부할수 있는 사이트

https://flukeout.github.io

CSS Diner

https://css-speedrun.netlify.app

CSS Speedrun | Test your CSS Skills