css 클래스명 + 클래스명에서 질문

css 클래스명 + 클래스명에서 질문

QA

css 클래스명 + 클래스명에서 질문

답변 5

본문

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의 여백이 위쪽에 추가됩니다.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 18
© SIRSOFT
현재 페이지 제일 처음으로