[CSS] 레이아웃, Selector quiz

• .only {…} : class가 only인 엘리먼트를 선택한다.

• *{…} : 모든 엘리먼트들을 선택한다.

• section, h1 {…} : 쉼표는 section과 h1를 다중으로 선택한다.

• #label.center {…} : id가 label이면서 동시에 class가 center인 엘리먼트를 선택한다.

• section h2 {…} : section의 후손 엘리먼트 중 h2 엘리먼트를 선택합니다.

• article .item {…} : article의 후손 엘리먼트 중 class가 item인 엘리먼트를 선택합니다.
  

• header > p {…}: > 는 header의 자식 엘리먼트 p를 선택합니다.

• article + p {…} : + 는 article과 인접한 형제 엘리먼트 p를 선택합니다

• section ~ p {…} : ~ 는 section과 인접한 형제 엘리먼트 p를 모두 선택합니다.

띄어쓰기 가운데 !!!! 주의할것 (1번2번 비교주의)

1. #container .mx-auto {…} : id가 container인 엘리먼트의 후손 엘리먼트 중 class가 mx-auto인 엘리먼트를 선택합니다. 후손엘리먼트임을 주의하자!!!!!
   
   

2. #container.mx-auto {…} : id가 container이면서 동시에 class가 mx-auto인 엘리먼트를 선택합니다.
   

• #container > .mx-auto {…} : id가 container인 엘리먼트의 자식엘리먼트 중 class가 mx-auto인 엘리먼트를 선택합니다.

• a[href] {…} :a 엘리먼트 중에서, href 속성을 갖는 모든 엘리먼트를 선택합니다.

• p[id='only'] {…} : p 엘리먼트 중에서, id가 only인 속성을 갖는 모든 엘리먼트를 선택합니다.

• p:first-child {…} : :first-child는 p 엘리먼트 중에서, 첫 번째 자식 엘리먼트를 선택합니다.

• ul > li:nth-child(3) {…} : ul의 자식 엘리먼트 중에서, 세 번째 자식 엘리먼트가 li인 것을 선택합니다.

• section > p:nth-child(2n+1) {…} : section의 자식 엘리먼트 중에서, 홀수 번째 자식 엘리먼트가 p인 것을 선택합니다.

• div:nth-last-child(2) {…} : div의 자식 엘리먼트 중에서, 마지막에서 두 번째 엘리먼트가 div인 것을 선택합니다.

• p:first-of-type {…} : p 엘리먼트의 형제 엘리먼트 중 첫 번째 p 엘리먼트를 선택합니다. (first-child와는 다르게 첫 번째 자식 엘리먼트가 아닌, 처음 등장하는 p를 선택합니다)

• p:not(#only) {…} : p 엘리먼트 중에서, id가 only인 엘리먼트를 제외하고 모두 선택합니다.