[CSS] 셀렉터(Selector)

---

1.전체 셀렉터

모든 요소를 선택

<style>
    *{ color: red; }

</style>


<p>sdas</p>
<a>asda</a>

 

 

 

2.태그 셀렉터

태그명으로 요소를 선택

p { color: red; }
a {color: antiquewhite;}

 

 

 

3. ID 셀렉터

id 어트리뷰트 값을 지정하여 요소를 찾는다.

<style>
   #ppp {color: aquamarine;}
</style>


<p id="ppp">sdas</p>
<a>asda</a>

sdas

asda

 

 

 

4.클래스 셀렉터

class 어트리뷰트 값을 지정하여 일치하는요소를 찾는다.
이미 정의되어있는 클래스를 지정하는것또한 가능하다.

<style>
   .class1{color: rgb(117, 117, 15);}
</style>


<p id="ppp">sdas</p>
<a class="class1">asda</a>

sdas

asda

 

 

 

 

 

5.어트리뷰트 셀렉터

셀렉터[어트리뷰트]형태로 작성하여 지정된 어트리뷰트를 갖는 모든 요소를 선택

<style>
   a[href]{color:blue}
</style>

<a href="https://www.google.com/">qqqqqq</a>

 

 

 

 

5-1.어트리뷰트 셀렉터 활용

셀렉터[어트리뷰트=”값”] 형태로 값 지정가능
셀렉터[어트리뷰트~=”값”] 형태로 공백으로 분리된 단어를 포함하는 요소 선택가능
셀렉터[어트리뷰트|=”값”] 형태로 지정값하고 일치 or 해당 값뒤에 하이픈(-) 으로 이어지는 요소
셀렉터[어트리뷰트^=”값”] 형태로 지정값으로 시작하는 요소를 선택
셀렉터[어트리뷰트*=”값”] 형태로 지정된 어트리뷰트 값을 포함하는 요소

<style>
   a[href]{color:blue}
   a[href="http://www.naver.com"]{color:gold}
</style>

<a href="https://www.google.com/">qqqqqq</a>
<a href="http://www.naver.com">qqqqqq</a>

 

 

 

 

 

 

6.후손 셀렉터

셀렉터A 셀렉터B 형태로
셀렉터A의 모든 하위요소중 셀렉터 B와 일치하는 요소를 찾는다.
(모든 후손을 탐색)

<style>
   div a{ font-size: 30;}
</style>

<div>
   <a>내부</a>
   <f><a>내내부</a></f>
</div>

 

 

 

7.자식 셀렉터

셀렉터A > 셀렉터B 형태로
셀렉터A의 자식셀렉터중에서만 셀렉터B와 일치하는 모든 요소를 선택한다.

 

<style>
   div > p{ font-size: 30;}
</style>

<div>
   <p>내부</p>
   <f><p>내내부</p></f>
</div>

 

 

 

 

 

8.인접 형제 셀렉터

셀렉터A + 셀렉터B 형태로
셀렉터A 바로뒤의 셀렉터B 요소를 선택(사이에 다른 요소존재XX)

<style>
   a + p{color: aqua;}
</style>

<a></a>
<p>안녕</p>
<p>하세요</p>

 

 

 

 

 

 

9.일반 형제 셀렉터

셀렉터A ~ 셀렉터B 형태로
셀렉터 A 형제 요소중 뒤에 오는 모든 셀렉터 B요소 선택

<style>
   s ~ p{color: red;}
</style>

<s></s>
<p>잘가</p>
<p>세요</p>