목록css형제선택자 (1)

지지나

CSS - 형제 선택자 심화

지난 포스팅에 html 부모자식 태그와 css 자식, 자손 선택자와 형제 선택자, 이미지 적용하기에 대해서 다루었다. 이번에는 형제 선택자에 대해 조금 더 깊이 알아보려고 한다. 형제가 여럿일 경우 각각 따른 css를 적용하려면 어떻게 해야 할까? 맨 첫번째 형제는 first-child{속성:속성값;} 두번째 ~ 끝에서 바로 윗 형제까지는 nth-child(n번째){속성:속성값;} 마지막 형제는 last-child{속성:속성값;} 를 해주면 된다. 그렇다면 그 위에 태그와 태그도 서로 형제들인데, 셋째인 bro2에다가만 노랑색 배경을 해주고 싶다면 어떻게 해야 할까? 두 가지 방법으로 할 수 있는데, 태그의 셋째인 p:nth-child(3) 으로 지정해서 바로 속성을 입힐 수도 있고, 아니면 두 번째 태..
기획자의 프로그래밍 걸음마/HTML, CSS 2020. 7. 8. 20:39
Prev 1 Next