CSS의 선택자

기본

▶ 전체 선택자(Universal Selecotr): 모든 요소를 선택

* {
	color: red;
}

 

 

▶ 태그 선택자(Type Selector): 별다른 기호 없이 태그 이름으로 선택

<ul>
    <li>목록</li>
    <li>목록</li>
    <li>목록</li>
</ul>

li {
	color: red;
}

 

 

▶  클래스 선택자(Class Selector): HTML에서 class 속성 값을 정해주고 css로 불러옴

<ul>
    <li class="orange">목록</li>
    <li>목록</li>
    <li>목록</li>
</ul>

.orange {
	color: orange;
}

 

 

▶ 아이디 선택자(ID Selector): HTML에서 id 속성의 값을 정해주고 css로 불러옴

<ul>
    <li class="orange">목록</li>
    <li id="orange">목록</li>
    <li>목록</li>
</ul>

#orange {
	color: orange;
}

 

 

 

복합

▶ 일치 선택자 (Basic Combinator): 선택자가 동시에 만족하는 요소 선택. > 가 선택자의 기호

<span class="orange">오렌지</span>

span.orange {
	color: red;
}

 

 

▶ 자식 선택자(Child Combinator): 선택자 자식 요소 선택

<ul>
    <li class="orange">목록</li>
    <li>목록</li>
    <li>목록</li>
</ul>

ul > .orange {
	color: red;
}

 

 

▶ 하위(후손) 선택자(Descendant Combinator): 선택자의 하위 요소 선택. 띄어쓰기가 선택자의 기호

<div>
	<ul>
        <li>사과</li>
        <li>딸기</li>
        <li class="orange">오렌지</li>	
    </ul>
    <div>당근<div>
    <p>토마토</P>
    <span class="orange">오렌지<span>
</div>

<span class="orange">오렌지</span>

div .orange {
	color: red;
}

- div 박스 안에 class명이 orange인 선택자를 모두 가리킨다.

- 위 예제에서 div 박스 밖에 있는 "<span class="orange">오렌지</span>"는 가리키지 않는다.

 

 

▶ 인접 형제 선택자(Adjacent Sibling Combinator): 선택자의 다음 형제 요소 하나를 선택

<ul>
    <li>사과</li>
    <li>딸기</li>
    <li class="orange">오렌지</li>
    <li>망고</li>
    <li>사과</li>
</ul>

.orange + li {
	color: red;
}

- orange 다음 요소 <li>망고</li> 하나가 선택된다.

 

 

▶ 일반 형제 선택자(General Sibling Combinator): 선택자의 다음 형제 요소 모두 선택

<ul>
    <li>사과</li>
    <li>딸기</li>
    <li class="orange">오렌지</li>
    <li>망고</li>
    <li>사과</li>
</ul>

.orange ~ li {
	color: red;
}

- orange 다음 요소 <li>망고</li>, <li>사과</li> 모두 선택된다.

 

 

 

가상 클래스(Pseudo-Classes)

▶ :hover: 선택자에 마우스 커서가 올라가 있는 동안 선택

div:hover {
	color: red;
}

 

 

 

▶ :active: 선택자가 마우스를 누르고 있는 동안 선택

div:active {
	color: red;
}

 

 

▶ :focus: 선택자가 포커스되면 선택

input:focus {
	background-color: orange;
}

- Focus가 될 수 있는 요소는 HTML 대화형 콘텐츠가 해당한다.
- ex) input, a, button, label, select 등
- HTML 대화형 콘텐츠 요소가 아니더라도 tabindex 속성을 사용한 요소도 Focus가 될 수 있다.
- tabindex가 기본으로 설정되어 있는 input같은 요소는 따로 tabindex를 부여하지 않는다.

 

 

▶ :first-child: 선택자가 형제 요소 중 첫째라면 선택

<div class="fruits">
    <span>딸기</span>
    <span>수박</span>
    <div>오렌지</div>
    <p>망고</p>
    <h3>사과</h3>
</div>

.fruits span:first-child {
	color: red;
}

- fruits의 하위 요소인 span태그들 중 첫 번째 자식인 <span>딸기</span>를 선택한다.

 

.fruits div:first-child {
	color: red;
}

- fruits의 하위 요소인 div태그들 중 첫번째 자식인 <div>오렌지</div>를 선택한다.

 

 

▶ :last-child: 선택자가 형제 요소 중 마지막이라면 선택

.fruits h3:last-child{
	color: red;
}

- fruits의 하위 요소인 h3태그들 중 마지막 자식인 <h3>사과</h3>를 선택한다.

 

 

▶ :nth-child(n): 선택자가 형제 요소 중 n째라면 선택

- n은 0부터 시작한다. (Zero-Based Numbering)

.fruits *:nth-child(2) {
	color: red;
}

- fruits의 모든 하위 요소들 중 2번째 자식인 <span>수박</span>을 선택한다.

 

.fruits *:nth-child(2n){
	color: red;
}

- fruits의 모든 하위 요소들 중 2의 배수 번째 자식인 <span>수박</span>, <p>망고</p>를 선택한다.

 

.fruits *: nth-child(2n+1) {
	color: red;
}

- fruits의 모든 하위 요소들 중 2의 배수에 1을 더한 값(홀수) 번째 자식인 <span>딸기</span>, <div>오렌지</div>, <h3>사과</h3>를 선택한다.

 

.fruits *:nth-child(n+2) {
	color: red;
}

- fruits의 모든 하위 요소들 중 n번째에 2를 더한 값 번째 자식인 <span>수박</span>, <div>오렌지</div>, <p>망고</p>, <h3>사과</h3>를 선택한다.

 

 

▶ 부정 선택자(Negation): 선택자가 아닌 요소 선택

<div class="fruits">
    <span>딸기</span>
    <span>수박</span>
    <div>오렌지</div>
    <p>망고</p>
    <h3>사과</h3>
</div>

.fruits *:not(span) {
	color: red;
}

- fruits의 모든 하위 요소들 중 span을 제외한 자식인 <div>오렌지</div>, <p>망고</p>, <h3>사과</h3>를 선택한다.

 

 

 

가상 요소 선택자(Pseudo-Elements)

▶ ::before: 선택자 요소의 내부 앞에 내용(Content)을 삽입. 인라인 요소.

.box::before {
	content: "앞!";
}

<div class="box">
	<!-- ::before은 이 자리를 가리킨다. -->
	Content!
</div>

- "앞! Content!"이 화면에 출력된다.

 

 

▶ ::after: 선택자 요소의 내부 뒤에 내용(Content)을 삽입. 인라인 요소.

.box::after {
	content: "뒤!";
}

<div>
    Content!
    <!-- ::after은 이 자리를 가리킨다. -->
</div>

- "Content! 뒤!"이 화면에 출력된다.

 

 

 

속성 선택자(Attribute)

해당 속성을 포함한 요소 선택

▶ [disable]

<input type="text" value="텍스트">
<input type="password" value="1234">
<input type="text" value="ABCD" disabled> <!-- 선택 -->

 

 

▶ [type]

<!-- 모두 선택 -->
<input type="text" value="텍스트">
<input type="password" value="1234">
<input type="text" value="ABCD" disabled>

 

 

▶ [type="password"]

<input type="text" value="텍스트">
<input type="password" value="1234"> <!-- 선택 -->
<input type="text" value="ABCD" disabled>