해당요소의 바로 아랫단계에 있는 요소를 선택할 때 쓰인다.
예를 들어 이런 마크업이 있다고 치자.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <p class="blank-m"> <strong>자식요소를 선택해보자</strong> </p> <ul> <li><span>첫</span>번째 요소 <ul> <li>ABC</li> <li>가나다</li> </ul> </li> <li><span>두</span>번째 요소</li> <li><span>세</span>번째 요소</li> </ul> | cs |
ul 안에 span으로 감싸진 '첫', '두', '세' 라는 글자만 빨갛게 바꾸고 싶다.
이럴때 쓸 수 있는 게 > 기호이다.
태그를 층이라고 친다면 > 기호는 1층씩 내려가라는 표시이다.
1 2 3 | ul > li > span{ color: red; } | cs |
결과값은 아래와 같다.
자식요소를 선택해보자
사실 이럴 때 쓸 수 있는 선택자는 이거 말고도 있지만... 더 적절한 예제가 생각이 안 난다 ㅠㅠ
같은 부모를 가진 요소 중, 나를 기준으로 바로 다음 요소를 선택할 때 쓰인다.
예제의 일부분을 가져왔다.
1 2 3 4 5 6 7 8 9 10 11 | <dl> <dt>재료</dt> <dd> <span>쇠고기 200g,</span> <span>다진 파 1큰술,</span> <span>다진 마늘 1작은술,</span> <span>소금 1/2 작은술,</span> <span>깨소금 1작은술,</span> <span>참기름 1큰술,</span> </dd> </dl> | cs |
1 2 3 4 5 | span + span{ color: deeppink; font-size: 18px; font-weight: bold; } | cs |
span + span을 사용해 스타일을 적용하면 다음과 같은 결과가 나온다.
span 옆에 있는 span이라 결국 맨 첫번째 스판을 제외한 모든 스판에 스타일이 적용된다.
이거는 그냥... 아무리 설명해도 애매하다. 걍 결과를 보는게 제일 빠름.