2-5 CSS Selector

blackwidow·2020년 11월 5일
0
post-thumbnail
  • 셀렉터
h1 { }
div { }
  • 전체 셀렉터
* {}
  • Tag 셀렉터
section, h1 { } //다중으로 선택(모든section과 모든 h1)
  • ID 셀렉터
#only { } // id="only"인 모든 태그 선택
  • class 셀렉터
.widget { }
.center { }
  • 이중 셀렉터
#container.mx-auto {...}
//id가 container이면서 동시에 class가 mx-auto인 엘리먼트를 선택
  • attribute 셀렉터
a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }
  • 후손 셀렉터
header h1 {} 
// <header>...<h1>...</h1>...</header> 
//hearer의 후손 엘리먼트 중 h1엘리먼트 선택

#container .mx-auto {...}
// id가 cotainer인 엘리먼트의 후손 엘리먼트 중 class가 max-auto인 엘리먼트 선택

  • 자식 셀렉터
header > p { }

#container > .mx-auto 
// id가 container인 엘리먼트의 자식 엘레먼트 중 class가 mx-auto인 엘리먼트 선택
  • 인접 형제 셀렉터
section + p { } // section과 인전합 형제 엘리먼트 p를 선택
  • 형제 셀렉터
section ~ p { } //section과 인전합 형제 엘리먼트 p를 모두 선택
  • 가상 클래스
a:link { }
a:visited { }
a:hover { }
a:active { }
a:focus { }
  • 요소 상태 셀렉터
input:checked + span { }
input:enabled + span { }
input:disabled + span { }
  • 구조 가상 클래스 셀렉터
p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }
  • 부정 셀렉터
input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }
  • 정합성 확인 셀렉터
input[type="text"]:valid { }
input[type="text"]:invalid { }
  • 기타
a[href] // a 엘리먼트 중에서, href 속성을 갖는 모든 엘리먼트를 선택
p[id='only'] // p 엘리먼트 중에서, id가 only인 속성을 갖는 모든 엘리먼트 선택
div[class='center'] 
// div 엘리먼트 중에서, class가 center인 속성을 갖는 모든 엘리먼트 선택

article vs section

html5에서...
<article>
: 내용이 각기 독립적이고 홀로 설 수 있는 내용을 담는다.
: 주로 블로그 글, 포럼 글, 뉴스, 기사 등을 article로 묶는다.

<section>
: 서로 관계있는 문서를 분리하는 역활을 함
: 주로 문서를 다른 주제로 구분짓기 위해 사용됨

profile
javascript 공부하는 sumiindaeyo

0개의 댓글