CSS - 형제 선택자 심화

지난 포스팅에 html 부모자식 태그와 css 자식, 자손 선택자와 형제 선택자, 이미지 적용하기에 대해서 다루었다. 

이번에는 형제 선택자에 대해 조금 더 깊이 알아보려고 한다.

 

형제가 여럿일 경우 각각 따른 css를 적용하려면 어떻게 해야 할까?

 

 

맨 첫번째 형제는 first-child{속성:속성값;}

두번째 ~ 끝에서 바로 윗 형제까지는 nth-child(n번째){속성:속성값;}

마지막 형제는 last-child{속성:속성값;} 를 해주면 된다. 

 

그렇다면 그 위에 <h1> 태그와 <p>태그도 서로 형제들인데, 셋째인 bro2에다가만 노랑색 배경을 해주고 싶다면 어떻게 해야 할까?

 

두 가지 방법으로 할 수 있는데, <p>태그의 셋째인 p:nth-child(3) 으로 지정해서 바로 속성을 입힐 수도 있고, 

아니면 두 번째<p> 태그의 아랫 형제 p:nth-child(2)+p 으로 간접적으로(?) 지정할 수도 있다. 

 

 

 

여기까지가 내일배움카드로 수강한 HTML/CSS 1주차 수업의 복습이다. 

다음 강의부터는 HTML은 더 이상 다루지 않고 CSS만 다룬다고 하는데 솔직히 조금 걱정이다. 짧은 시간 내에 많은 것을 전달해야 하기 때문에 겉핥기로 배운 느낌이랄까?

 

개념원리 수업을 듣는다고 쎈수학을 한번에 풀 수는 없었듯이 내가 여러번 해봐야겠지ㅠ