css 선택자

1. universal 선택자(전체 선택자)

* {color: black;}

• 모든 html 태그에 속성 적용(사용시 주의 필요)

---

2. class 선택자

.color-red {color: red;}

<p class="color-red">빨간색 글자를 클래스를 사용해서 적용</p>

• html에 class 이름을 지정해서 사용
• 선택자 앞에 . + class 속성값
• 실무에서 많이 사용

---

3. tag 선택자

a {text-decoration: none;}

<a href="">링크1</a>

• html 태그명 자체를 입력하는 방법

---

4. id 선택자

#container {
width: 400px;
height: 500px;
background-color: greenyellow;
}

<div id="container">컨테이너 박스</div>

• html에 id 이름을 지정해서 사용
• 선택자 앞에 # + id 속성값
• 중복되지 않은 유일한 값에 지정
• 유일한 값을 지정하기에 자주 사용하지 않음

---

5. combinator 선택자(복합 선택자)

하위 선택자

section ul {border: 1px solid black;}

<section>
 <p>p태그</p>
  <ul>
   <li>
   li 태그
    <ul>
     <li>li 태그</li>
    </ul>
   </li>
  </ul>
</section>

출력

• section 태그 내 ul 전체에 border 값 적용

자식 선택자

section > ul {border: 1px solid black;}

<section>
 <p>p태그</p>
  <ul>
   <li>
   li 태그
    <ul>
     <li>li 태그</li>
    </ul>
   </li>
  </ul>
</section>

출력

• section 태그 바로 아래에 있는 ul만 border 적용(그 안에 있는 ul 적용 x)

인접 형제 선택자

h1 + ul {background-color: blue;}

<div>
 <h1>h1태그</h1>
 <ul>
  <li>li태그</li>
 </ul>
 <ul>
  <li>li태그</li>
 </ul>
</div>

출력

• h1 옆에 있는 태그만 선택해서 적용

일반 형제 선택자

h1 ~ ul {background-color: blue;}

<div>
 <h1>h1태그</h1>
 <ul>
  <li>li태그</li>
 </ul>
 <ul>
  <li>li태그</li>
 </ul>
</div>

출력

• h1 인근 태그들 모두 선택해서 적용

---

6. attribute 선택자(속성 선택자)

.box1 input[type="text"] {border: 2px solid red;}
[name="email"] {border: 2px solid blue;}

<div class="box1">
 <input type="text" name="" id="" />
 <input type="email" name="email" id="" />
 <input type="date" name="" id="" />
</div>

출력

• []사이에 속성값 선택자 입력

속성 선택자 입력값

---