[CSS] CSS 선택자(1)

 

이번 시간에는 CSS 선택자에 대해 알아보겠습니다.

CSS 선택자

• 기본
• 복합

1. 기본 선택자

-  *  : 전체 선택자 (Universal Selector) , 모든 요소를 선택.

 

---

- X : 태그 선택자(Type Selector) , 태그 이름이 X인 요소 선택.

h1 {
	color: red;
    }

 

---

-. X : 클래스 선택자(Class Selector), HTML Class속성의 값이 X인 요소 선택.

클래스 이름이 같기 때문에 태그가 달라도 CSS가 적용이 됨.

<div>
	<h1>Hello</h1>
	<p>안녕하세요</p>
	<p class="red">반가워!</p>
	<span class="red">잘가!</span>
</div>

.red {
	color: red;
}

---

- #X : 아이디 선택자(ID Selector), HTML id속성의 값이 X인 요소 선택.

'반가워!'만 글자 색이 변경됨.

<div>
	<h1>Hello</h1>
	<p>안녕하세요</p>
	<p id="red" class="red">반가워!</p>
	<span class="red">잘가!</span>
</div>

.red {
	color: red;
}

---

2. 복합 선택자

- AX : 일치 선택자(Basic Combinator), 선택자 A와 X를 동시에 만족하는 요소 선택.

span태그 중 클래스가 red인 요소 선택.

(일치 선택자를 사용할 때, 태그 선택자를 사용하려면 항상 가장 앞에 적어야 한다.)

<div>
	<h1>Hello</h1>
	<p>안녕하세요</p>
	<p class="red">반가워!</p>
	<span class="red">잘가!</span>
</div>

span.red {
	color: red;
}

---

- A > X : 자식 선택자(Child Combinator), 선택자 A의 자식 요소 X를 선택.

class가 red인 요소 중 ul태그의 자식인 요소를 선택.

<div>
	<ul>
    	<li>html</li>
        <li class="red">css</li>
        <li>JS</li>
    </ul>
    <span class="red">WEB</span>
     
</div>

ul > .red {
	color: red;
}

---

- A X : 하위(후손) 선택자(Descendant Combinator), 

선택자 A의 하위 요소 X 선택. '띄어쓰기'가 선택자의 기호.

클래스가 red인 요소 중, 조상요소에 div가 있는 요소 선택.

<div>
	<ul>
    	<li>html</li>
        <li class="red">css</li>
        <li>JS</li>
    </ul>
    
</div>
<span class="red">WEB</span>

ul .red {
	color: red;
}

---

- A + X : 인접 형제 선택자(Adjacent Sibling Combinator), 선택자 A 다음의 형제 요소 X 하나를 선택.

red라는 클래스를 가진 요소의 다음 요소인 'JS'가 선택됨.

<ul>
    <li>html</li>
    <li class="red">css</li>
    <li>JS</li>
    <li>web</li>
</ul>

.red + li {
	color: red;
}

---

- A ~ X : 일반 형제 선택자(General Sibling Combinator), 선택자 A 다음의 형제 X 모두 선택.

red라는 클래스를 가진 요소의 다음에 있는 JS, web 모두 선택됨.

<ul>
    <li>html</li>
    <li class="red">css</li>
    <li>JS</li>
    <li>web</li>
</ul>

.red ~ li {
	color: red;
}