Achievement Goals
- 보다 다양한 CSS 셀렉터 규칙을 이해할 수 있다.
- 후손 셀렉터와 자식 셀렉터의 차이는 반드시 알아야 합니다.
- 후손은 자식포함 손자, 그 이후을 후손 모두 포함한다.
- 후손셀렉터는 한칸 띄워서 사용(' ')
#container .mx-auto{...}- id가 container인 div안에 class가 mx-auto인 엘리먼트 선택
<div id="container"> <section>...</section> <section>...</section> <section class="mx-auto">...</section> </div>
- 자식은 직계자식만 선택한다.(후손은 포함되지 않는다.)_
- 자식셀렉터 선택(>사용)
-header > p {...}- header에서 자식인 p 선택
<html> <header> <h1> ... </h1> <p id="header_title_assi" class="intro">...</p> </header>
- n번째 자식 엘리먼트 선택(:nth-child {...})
- p엘리먼트 중 첫번째 자식 엘리먼트 선택
p:first-child {...}
- 인접 형제선택자는 같은 부모를 가진 형제중에서 나의 바로 뒤에 오는 형제를 선택하는것이 인접형제선택자이다.(나+바로뒤)
- div라는 같은 부모안에 인접한 형제 엘리먼트 선택(+사용)
article + p {...}
<div>
<article class="mx-auto">
</article>
<p>
</p>
</div>
- 일반 형제선택자는 같은 부모를 가진 형제중에서 나 뒤에 오는(바로아니어도 괜찮음) 해당엘리먼트 선택.
- 일반 형제 엘리먼트 모두선택(~사용)
-section ~ p {...}
<section>... </section>
<div>... </div>
<p> ...</p>- 해당엘리먼트의 형제엘리먼트 중 n번째 엘리먼트 선택
엘리먼트:nth-of-type {...}p:first-of-type {...}= p인데 관계는 형제이고, 첫번째를 선택한다.(first-child와 다르게(꼭, 자식이어야한다) 첫번째로 등장하는 p선택.
- n번째 자식 엘리먼트 선택
-엘리먼트:nth-child {...}
-p:first-child {...}= p엘리먼트중, 첫번째자식역활하는 p 선택(다중선택가능)
- 홀수번째 자식 엘리먼트 구하기
-엘리먼트:nth-child(2n+1) {...}
-section > p:nth-child(2n+1) {...}= section의 자식에서 홀수번째 p선택
- p엘리먼트 중 id가 'only'인 엘리먼트 선택 방법 2가지
- p#only
- p[id='only'] {...}
- div엘리먼트 중 class가 'center'인 엘리먼트 선택 방법 2가지
- div.center
- div[class='center']
javascript 공부하는 sumiindaeyo