[CSS] css 기본 , 인접형제 , 일반형제 , 자식 선택자

전체선택자

페이지에 있는 전체 전체 요소를 대상으로 한다.

주의 : 실전에서는 사용하지 말 것을 권함. 브라우저에 과부하가 걸릴 수 있음.

* {
margin:0;
padding:0;
}

 

타입 선택자

h1, p, div, span 등 html 요소(Element)를 선택하는 선택자.

 

클래스 선택자(.)

특정 값을 class 속성의 값으로 갖는 요소를 선택한다.

.abc{
	color:red;
}
p.abc{
	color:blue;
}
	/*클래스 값으로 abc를 갖는 p 요소를 선택*/

 

인접형제선택자(X+Y)

<div>0</div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>

div + p{
	color:red;
}

등위 선택자로 동등한 위치에 있는 태그를 선택하여 css속성을 지정할 수 있다.

지정한 요소의 바로 다음에 위치하는 요소만 선택한다.

그래서 <div> 바로 뒤에 있는 <p>1</p> 의 색상만 빨간색으로 변한다.

결과값

0

1

2

3

4

 

일반형제 선택자(~)

<div>0</div>
<span>12345</span>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>

div~p{
	color:red;
}

등위 선택자로 동등한 위치에 있는 태그를 선택하여 css속성을 지정할 수 있다.

같은 부모를 가지고, ~ 뒤에 오는 선택자들을 모두 선택한다.

꼭 바로 뒤가 아니어도 적용 가능하다.

결과값 :

0

12345

1

2

3

4

 

자식 선택자(>)

부모 요소 바로 밑에 존재하는 자식 요소를 선택하는 결합자.

주의할 점은 한단계 아래에 있는 요소만 선택한다.

 

<div>
	<ul>
		<li>Hello world!</li>
	</ul>
</div>

div > ul > li{
	color:red;
}

 

후손선택자(X Y)

선택자를 이용해 더 상세히 작업해야할 때 descendant(후손)을 뒤에 사용할 수 있다. 한번의 띄어쓰기로 구현할 수 있다.

<ul>
	<li>후손선택자</li>
</ul>

ul li{
	color:red;
}