231011 수) CSS Selector

1) Element Selector

 

하나의 요소를 통으로 고름

 

<style>

 h2 {

      color:red

 }

</style>

 

 

2) Class Selector

 

클래스는 어떤 html의 요소에든 적용가능하다

 

<style>

 .red-text {

       color:red

 }

</style>

 

<h2 class ="red-text">Red</h2>

<h2>Blue</h2>

<h2 class ="red-text">Green</h2>

<p class ="red-text">paragraph</p>

 

 

3) ID Selector

 

클래스 선택기와 비슷하나, 클래스 선택기는 다중으로 적용가능하지만 ID 선택기는 단일로만 적용가능하다

 

<style>

 #main {

   color:red

  }

</style>

 

<h2 id ="main">Red</h2>

<h2>Blue</h2>

<h2>Green</h2>

 

 

4) Attribute Selector (특성 선택기)

 

true, false를 통해 원하는 요소에 css값을 넣을 수 있다

 

<style>

  p[draggable] {

     color:red

  }

</style>

 

<p draggable="true">Drag me</p>

<p draggable="false">Don't Drag me</p>

<p draggable="false">Don't Drag me</p>

 

이렇게 하면 Drag me가 빨간색이 되고

 

<style>

  p[draggable = "false"] {

     color:red

  }

</style>

 

<p draggable="true">Drag me</p>

<p draggable="false">Don't Drag me</p>

<p draggable="false">Don't Drag me</p>

 

이 경우엔 Don't Drag me가 빨간색이 된다

 

 

5) Universal Selector (범용 선택기)

 

구별없이 전체 선택

 

<style>

  * {

     color:red

  }

</style>