css - selector

selector

0.Universal Selector-모든 태그 선택

*{padding:0;margin:0}
padding:컨텐츠와 보더 사이의 여백
margin:보더의 사이로 바깥쪽 여백

1.tag selector

h1{color:red;}

2.id selector-한페이지에 unique하게 사용

#title{color:red;}
<h1 id="title">제목</h1>

3.class selector-한페이지에 여러개 사용가능

.subTitle{color:red;}
<h3 class="subTitle">부제목</h3>

4.grouping selector-여러 식별자를 한꺼번에 적용

h1,h2,p{color:red;}

5.descendent selector -후손엘리먼트 모두 적용(space)

div i{color:red;}
//div(space) i :div태그 아래있는 모든 자손들중 i tag만 선택

---

6.child select- 자식엘리먼트만 적용(한단계 아래만)(>)(많이 사용되고 있다.)

div > {color:red;}

#box1>div>div>div>#title>p(id는 유니크하기에 앞에 box1랑 div가 필요가 없다. 과용되어진다.

#box>div>div>.title>p(위에서부터 찾을필요가 없다. )

7.adjacent sibling selector - 다음 형제 엘리먼트 하나만 적용(+)

div + p{color:red;}

8.general sibling select - 다음 형제 엘리먼트들에 적용(~)

div ~ p{color:red;}

---

9.pseudo class - 의사 클래스,':'을 사용

(p태그에 부모를 기준으로 그 부모의 자식중에 첫번째 p태그에 출력.)
p:first-child{color:red;}

10.pseudo element - 의사 엘리먼트, '::'을 사용

h1::before{ content:url("icon.gif");}
h1::after{ content:url("icon.gif");}

---

11.attribute selector - attribute를 선택
11.1 a[target]=>a태그에 target 속성이 있는 것을 선택
11.2 a[target=="_blank"]=>a태그에 target속성값이 _blank인 것을 선택
11.3 [title~="flower"]=>title속성값에 flower라는 단어가 있는 것을 선택
11.4[class|="top"]=>class속성값이 top-으로 시작되는 것을 선택
11.5 [class^="top"]=>class속성값이 top으로 시작되는 것을 선택