HtmlCss. 12. 문제//후손선택자, 자식선택자를 이용해 선택하기

문제

정답

내 풀이

<!-- 이 div는 a의 부모 엘리먼트 이다. -->
<div>
  <!-- 이 a는 div의 자식 엘리먼트 이다. -->
  <a href="#">네이버</a>
</div>
<section>
  <a href="#">구글</a>
</section>

/* section 엘리먼트 안에 들어있는 a */
/* ` ` : 후손선택자 */
/* ` > ` : 자식선택자 */
/* 선택자가 길면 우선순위가 높다 */
div > a {
    color:green;
}

section > a {
    color:red;
}

선생님 풀이

<!-- 이 div는 a의 부모 엘리먼트 이다. -->
<div>
    <!-- 이 a는 div의 자식 엘리먼트 이다. -->
    <a href="#">네이버</a>
</div>
<section>
    <a href="#">구글</a>
</section>

/* section 엘리먼트 안에 들어있는 a /
/   : 후손선택자 /
/ > : 자식선택자 /
/ 선택자가 길면 우선순위가 높다 /
section a / section > a # 이 상황에서는 자식선택자를 써도 된다. / {
color: red;
}

/ 이 CSS 는 무시된다. /
a {
color: pink;
}

/ 이 CSS 는 적용된다. */
a {
color: green;
}

핵심사항

• css로 a태그를 적용하면 모든 a태그들이 변경된다.
• 태그에 안에 있는 a태그 한정으로 적용하고 싶다면
  • 부모태그를 적고 후손선택자나 자손선택자를 사용하여 a태그만 걸수 있도록 조건을 걸어준다

• 계층선택자 관계선택자 예시

<div>
    <p>
    	<a href="#">네이버</a>
    <p> 
</div>

• 자식선택자
  • >로 표시한다.
  • 예시) A>B 표시함으로써 A는 부모, B는 자식이다.
  • 예시) p>a 부모자식관계로 부모 p에서 자식 a를 선택
• 후손선택자
  • 공백으로 표시한다.
  • 예시) C B 표시함으로써 C는 조상, B는 후손이다.
  • 예시) div a 조상후손관계로 조상 div에서 후손 a를 선택

• 선택자는 길어지면 우선순위가 높아진다.
• 우선순위가 높아진다는 것은 다른 선택자보다 강력하게 적용된다.
• 후손선택자보다 부모선택자가 우선순위가 더 옾다.
  • 자식선택자 p>a >>> 후손선택자 div a
• 후손선택자를 해야하는 이유가 딱히 없으면 부모선택자를 사용하는 것이 좋다.

• 이미 css 속성이 걸어져 있는 태그에 한번더 태그에 속성을 주면 이전 속성 적용되지 않는다.