frontend/CSS&Design

[CSS] 선택자 속성, 자손, 동위

findTheValue 2021. 7. 1. 15:56

id는 #

class는 .

으로 선택

 

1. 태그 안에있는 태그 선택.

 

ul li.flex_items

(ul태그 안의 class name이 flex_items인 li태그 선택)

 

2. 속성지정 태그 선택.

 

input[type=text]

(input태그 중 type속성이 text인 것만 선택)

 

3. 자손 선택자.

div h1

div > h1

위에는 div 안의 모든 h1태그. 아래는 div 바로밑의 h1태그(직속태그)만 선택(자손 선택자)

 

4. 동위 선택자.

h3~div              : h3태그와 동위에 있는 태그들 중 h3밑의 모든 div태그

h3+div              : h3 동위, 바로 밑에있는 하나의 div태그

#title~div           : id = "title" 밑에있는 모든 div 태그