선택자(셀렉터)|범용 선택자, 상속 제어하기

셀라문·2022년 2월 18일
0

CSS

목록 보기
9/23

범용 선택자 (Universal Selector)

* 을 사용
전체 다 사용 되기 때문에 제일 상단에 쓰는 것이 좋다.
*는 보통 생략해서 사용을 하고 있다.

ex)
.red{color:red;}는
*.red{color:red;}에서 *을 생략해서 쓰는 것이다.

인접 형제 선택자와 함께 사용

이처럼 다른 선택자와 함께 사용이 가능하다.

상속 제어하기

initial

class가 달라도, 몇 개를 제외하고 대부분 부모 css를 자식이 상속받는다.
(그 자식의 css가 없을 경우)

상속 받고싶지 않은 class에 initial을 적용하면 된다.
ex) .child2{color:initial;}

만약 모든 css값을 초기로 돌리고 싶다면 all:initial을 적용하면 된다.
ex) .child2{all:initial;}

inherit

initial과 반대로 무조건 상속 받도록 함.

여기서 inherit을 사용하지 않았을 때
자식 child1은 blue 컬러를 상속받았지만 자신의 css인 red가 있으므로
상속받지 않고 red로 표현된다.
이때 자식이 css가 있더라도 상속을 받고 싶을 때 사용하는 것이 inherit이다.

unset

  1. 부모로부터 상속받을 값이 있을 때 : inherit으로 동작
  2. 부모로부터 상속받을 값이 없을 때 : initial으로 동작

inherit받을 값인 blue 빼고 처음으로 돌아간 예이다

profile
취미로 하는 공부기록장

0개의 댓글