CSS 선택자

선택자 문법

대상

selector {property : val}

선택자의 종류

1)  - 요소선택자, 타입선택자, 태그선택자 라고 함

h3 { font-siez:100%}
a {text-decoration:none}
img {border : 1}

2)   그룹선택자 (Groupping)

h3 { font-siez:100%}
a {text-decoration:none}
img {border : 1}




h1, h2, h3, h4 {font-weight: bold}
a img p {border : 1}
h3 span, h4 span { position : absolute}

3) 전체선택자 (Universal Selector)

* {margin : 0; padding:0}
html body * {text-decoration:none}
p.user * {font-size:15em}

4) 클래스 선택자 (Class Selector )

p.notice {font-weight:bold}
.container {float:left}
.positionX {position:absolute}

5) 멀티 클래스 선택자 (Multi Class Selector)

p.note.container { float:left}
.section.news1 {width : 500px} 

6) ID 선택자 (ID Selector)

ul#nav {list-style:none;margin:0;padding:0}
#user_info{text-decoration:none}

7) 하위 선택자 (Descendant Selector)

ul li a {text-decoration:none}
h3 span {postion:absolute;}

8) 자식 선택자 (Child Combinator)

body>blockqutoe {color:#4c6a77}
p>img {border:0.5px solid whtie;}
ul#subNav>li {font-variant:small-caps}

9) 속성 선택자 (Attribute Selector)

div [id] {font-size:10px;color:red}
p [class="note"] {font-size:14px;color:tan}
abbr [title~="mobile"] {color:red}
img [alt|="love"] {color:purple}

10) 고급 속성 선택자 ( Advanced Attribute Selector)

a [href^="http://"] {background:url('image.gif)}
a [href$=".psd"] {color:blue}
img [alt*="css"] {text-decoration:overline}
 

11) 가상 클래스 선택자 (Link Pseudo Class Selector)

a:link, a:visited {color:#999}
a:hover, a:active {color:#333}
p:hover {color:#78757e}

CSS 선택자

반드시 기억해야 하는 CSS 선택자

참고 : 패스트 캠퍼스 프론트엔드 강의