선택자와 상속

파랑·2021년 8월 18일

선택자와 상속

부모와 자식

HTML에서 element 간의 관계를 조상, 자손, 부모, 자식, 형제 4가지로 정의 할 수 있다.

특히 조상<->부모, 자손<-> 자식을 구별해야 한다. 직계 자손만 자식이며 직계 조상만 부모이다. 그 외에는 조상 또는 후손이다.

선택자

css에서 선택자는 주어의 역할을 하기 때문에 잘 알아두는 것이 좋다.
, {" "}, > . +의 역할이 다 다르고, 특히 공백에 민감하기 때문에 이를 잘 주의해서 쓸 필요가 있다.

selector meaning
* all
a" "(공백)b a의 후손
a>b a의 자식 b
a,b or
a+b a의 첫 형제
a~b all 형제 b after a
.class1.class2 또는 element.class3 등 붙여쓰게 되면 and의 의미가 생긴다.
공백(a의 후손)과 >(a의 자식)의 차이점을 눈으로 확인해보자.

selector	meaning
*	all
a" "(공백)b	a의 후손
a>b	a의 자식 b
a,b	or
a+b	a의 첫 형제
a~b	all 형제 b after a

직계 자손이 아닌 1.selector와 2.declaration은 border가 그려지지 않았음을 확인할 수 있다.

   <!DOCTYPE html>
   <html>
     <head>
       <style>
         ul li{
           color:red;
         }
         #lecture>li{
           border:1px solid red;
         }
         ul,ol{
           background-color: powderblue;
         }
       </style>
     </head>
     <body>
       <ul>
         <li>HTML</li>
         <li>CSS</li>
         <li>JavaScript</li>
       </ul>
       <ol id="lecture">
         <li>HTML</li>
         <li>CSS
           <ol>
             <li>selector</li>
             <li>declaration</li>
           </ol>
         </li>
         <li>JavaScript</li>
       </ol>
     </body>
   </html>

css selector는 모두 외우기 힘들기 때문에 cheat sheet를 보면 좋다.

https://www.adtrak.co.uk/blog/the-ultimate-css-selectors-cheatsheet

6페이지의 긴 cheat sheet이긴 하지만 그림으로 잘 설명되어 있다.

상속

css는 Cascading Style Sheets의 줄임말로 말 그대로 속성들이 Cascading 된다는 점이 매우 중요하다.

브라우저는 웹 브라우저가 기본적으로 가진 디자인, 사용자, 그리고 저자가 모두 수정할 수 있게 되어 있다.

이렇게 됨으로써, 같은 곳을 건드리는 디자인을 누가 쓴 것이 적용될 건지 정하는 우선순위가 필수적으로 필요하게 되었다. 결론적으로 브라우저<사용자<저자(개발자)의 우선순위를 가지게 된다.

선택자들의 우선순위

그러면 style attribute, id selector, class selector, tag selector의 우선순위는 어떻게 될까?

명시적으로 구체적일 수록 우선순위가 높다.

즉 style attribute > id selector > class selector > tag selector 순이다.

그렇다면 같은 클래스, 같은 id 등 동일한 우선순위를 가진 선택자들의 우선순위는 어떻게 될까?

뒤에 적힌 것이 적용된다.

a:link{
    /* 방문한 적 없는 */
    color: black;
}
a:visited{
    color: red;
}
a:hover{
    /* 마우스 롤오버 */
    color: yellow;
}
a:active{
    /* 마우스 클릭 */
    color:green;
}
a:focus{
    /* 마우스 클릭 */
    color:white;
}

롤오버한 채로 마우스를 클릭하고 잡게 되면

a:hover와 a:active 중에서 a:active가 적용되어 초록색으로 나오는 것을 볼 수 있다.

이 모든 우선순위를 뛰어넘는 방법은 css 속성 위에 !important라고 적어주는 것이다.

반드시 해당 속성이 적용된다.

상속되는 것과 상속되지 않는 것

<!DOCTYPE html>
<html>
  <head>
    <style>
      ul li{
        color:red;
      }
      #lecture>li{
        border:1px solid red;
        color: blue; /* 주목 */
      }
      ul,ol{
       background-color: powderblue;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
    <ol id="lecture">
      <li>HTML</li>
      <li>CSS
        <ol>
          <li>selector</li>
          <li>declaration</li>
        </ol>
      </li>
      <li>JavaScript</li>
    </ol>
  </body>
</html>