css 클래스명 + 클래스명에서 질문
본문
css 에서 클래스명 + 클래스명 {margin-top:10px} 에서
예를들어서 여러개가 있다면 처음부분은 안먹히던데 원래 그런건가요?
<div class="hello">안녕하세요</div>
<div class="hello">안녕하세요</div>
<div class="hello">안녕하세요</div>
<div class="hello">안녕하세요</div>
<div class="hello">안녕하세요</div>
<div class="hello">안녕하세요</div>
.hello + .hello {margin-top:10px}
답변 5
클래스명 + 클래스명으로 선택자를 선택하면 지정한 클래스를 제외한 바로 다음에 오는 형제요소를 선택하게됩니다.
따라서 첫번째 .hello클래스를 찾고 바로 다음에오는 2번째 .hello부터 적용이 되는것입니다.
CSS에서 .hello + .hello {margin-top:10px}는 직후 형제 선택자를 사용하여 첫 번째 .hello 요소 바로 뒤에 오는 .hello 요소에만 margin-top: 10px 속성을 적용합니다.
따라서 예시 코드에서 첫 번째 .hello 요소에는 margin-top 속성이 적용되지 않지만, 두 번째부터 마지막까지 모든 .hello 요소에는 10px의 여백이 위쪽에 추가됩니다.
https://www.w3.org/wiki/CSS3/Selectors/combinators/adjacent
https://www.w3.org/TR/selectors-3/#adjacent-sibling-combinators
selector-a + selector-b 에서
selector-a 는 적용되지 않습니다.
