Selectors, 왜 cascading인가

Selector

• elements
• classes .
• universal *
• IDs #
• attributes []

*sass: Parent selector &

 

Elements/Tags

해당되는 모든 태그에 적용

<h1> Our header </h1>
<p> The blog post </p>
<div> more info </div>


h1 {
 color: red;
}

 

Classes

클래스 이름은 임의로 정할 수 있음. 본 클래스가 들어가 있는 태그만 선택

클래스 이름을 지을때는 '소문자', '-'로 연결하여 짓기 *대소문을 구분하지 않음

클래스는 여러번 사용 가능

<h1 class='blog-post'> Our header </h1>
<p class='blog-post'> The blog post </p>
<div class='blog-post'> more info </div>

.blog-post {
 color: red;
}

 

Universal

모든 것에 적용. 하지만 거의 쓰지 않음

전체 동일 폰트를 적용할때 *{}보다 body {}가 더 유용

<h1> Our header </h1>
<p class='blog-post'> The blog post </p>

* {
 color: red;
}

 

IDs

ID는 하나만 존재 (ID는 속성이 아님)

<h1 id="main-title"> Our header </h1>

#main-title {
 color: red;
}

 

Attributes

같은 속성을 선택

<button disabled>
 Click
 </button>
 
 [disabled] {
  color: red;
 }

 

Cascading style

css의 우선 순위

여러 rule이 적용될때 개발자툴의 styles에서 가장 최상위에 있는 스타일이 가장 큰 우선순위를 가짐

=> Cascading: 여러 스타일이 같은 태그에 적용 될 수 있음

같은 tag일 경우 (위->아래로 읽기 때문에) 아래에 적혀있는 태그가 더 큰 우선순위를 가짐

 

Specificity

충돌을 막기위해 specificity라는 개념이 존재 

 

Inline > #ID > .class , :pseudo-class, [attribute] > Elements <Tag> , :: pseudo-element selector > 브라우저 기본값 > Universal

 

Pseudo-classes

MDN | Pseudo-classes

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-class :hover can be used to select a button when a user's pointer hovers over the button and this selected button can then be styled.

button:hover {
  color: blue;
}

 

Pseudo-elements ::first-line

MDN | Pseudo-elements

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.

p::first-line {
  color: blue;
  text-transform: uppercase;
}

Inheritance

부모것을 자식에게도 상속 하는것. body에 스타일을 줬다면 그 안에 있는 h1태그에도 적용이 되는 것

굉장히 낮은 specificty를 가지고 있음. 우선순위 낮음

value를 inherit;으로 줄 수 있음

rule with 'more' info > rule with 'less' info

specificity는 inheritance와 다름 (inheritance는 자동으로 부모 적용된게 자식에게 적용됨)