[CSS] Inheritance, Cascading Style Sheets, Specificity

상속(Inheritance)

상속이란 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려받는 것을 의미한다. 상속 기능이 없다면 각 요소의 Rule set에 프로퍼티를 매번 각각 지정해야 한다.

하지만 모든 프로퍼티가 상속되는 것은 아니다. 즉, 특정 컨테이너 규칙이 하위 항목에 적용된다는 것을 의미한다.'특정' 이라는 것을 기억하자.

상속이 되지 않는 것이 많으므로, 상속이 되는 프로퍼티만 살펴보자.

visibility
opacity
font
color
line-height
text-align
white-space

color는 상속되는 프로퍼티로서 자식 요소는 물론 자손 요소까지 적용된다. 여기서 상속되지 않는 요소 또는 프로퍼티를 inherit키워드를 사용하여 명시적으로 상속받게 할 수 있다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    .text-red {
      color: red;
      border: 1px solid #bcbcbc;
      padding: 10px;
    }
    .text-red button {
      color: inherit;
    }
    .text-red p {
      border: inherit;
      padding: inherit;
    }
  </style>
</head>
<body>
  <div class="text-red">
    <h1>Heading</h1>
    <p>Paragraph<strong>strong</strong></p>
    <button>Button</button>
  </div>
</body>
</html>

계단식(Cascading Style Sheets)

하나의 요소에 여러 규칙을 적용할 수 있다. 두 개 이상 있을 경우에는 특정 선택자의 가장 최신 규칙이 우선적으로 적용된다. 즉, 가장 마지막에 선언한 규칙이 우선적용된다.

 ol {
    list-style: none;

} 


li {
      list-style: square;

}

위와 같은 경우에는 ol에서 list-style이 none이지만, li 선택자에 list-style : square;규칙을 적용해주었기 때문에, square가 적용된다. 그렇다면 ol과 li의 순서가 바뀐다면 ol에 적용한 none값이 적용될까?

이러한 질문을 한다면, 아니요 라고 대답해 줄 수 있다. 그 이유는, li이 ol보다 구체적인 선택자이기 때문이다. "구체적" 이라는 의미가 무엇인지 아래에서 살펴보자.

cascading에 대한 자세한 내용은 스타일의 상속과 적용 우선 순위를 참고하자.

우선순위(Specificity)

우선순위는 더욱 구체적인 selector에 적용된 규칙이 덜 구체적인 selector보다 우선한다는 것을 의미한다.

li은 ol의 자식 선택자, 즉 li는 ol에게 부모의 규칙들을 상속받고 있다. ol선택자가 li를 감싸고 있으며, li는 ol의 하위 선택자이다. 하위 선택자이면서 li는 ol보다 구체적이다. 상위 선택자(=부모 선택자 ol)에서 설정한 규칙보다 하위 선택자(=자식 선택자 li)에서 설정한 규칙이 좀 더 구체적이기 때문에 위에서 던진 질문에 아니요 라는 답변을 한 것이다.

<a> 앵커 태그의 경우 body에서 색상 속성을 상속받더라도, 실제로 적용되진 않는다. 왜냐하면 이 앵커 태그는 브라우저가 제공하는 기본 색상이 적용되기 때문이다. 따라서 링크에 적용된 이 색상, 즉 브라우저의 기본 색상이 상속된 색상보다 더 구체적(specificity) 이라고 볼 수 있다. 그리고 이보다 더 구체적인 건 속성 선택자인 앵커 태그에 직접 추가한 색상이다. 따라서 가장 구체적인 요소에 추가된 색상이 가장 우세하다.

참고 자료 : https://poiemaweb.com/css3-inheritance-cascading
https://www.udemy.com/course/100-2022-web-development/

Author And Source

이 문제에 관하여([CSS] Inheritance, Cascading Style Sheets, Specificity), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@neo5188/CSSHTML5-Inheritance-Cascading-Style-Sheets-Specificity

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[CSS] Inheritance, Cascading Style Sheets, Specificity

상속(Inheritance)

계단식(Cascading Style Sheets)

우선순위(Specificity)

Author And Source

좋은 웹페이지 즐겨찾기