선택자(Selectors) CSS , 우선순위

div.box.active

class = .

div.box.active = div인데 class가 .box이자 .active인 요소
.box, .active = class가 .box 이거나 .active인 요소

id Selector  # => id selector는 
<sapn id='aaa'> </span>

#aaa {
  
}

문서상에서 id 값은 단 한개만 존재 해야한다. 겹치면(x)

 

#kimbug.box

자손 선택 (자식포함) "공백"

자손선택(모든 h1 전부 다 )

 

자식만 선택하고 싶을 경우 >

바로 밑 자식들만 바꿔준다 >

 

형제(sibling)들을 선택하고 싶을 경우(1) ~ +
active class 다음에 오는 모든 li 만 바꿔주고싶을 때

active class 다음에 오는 모든 li 만 바꿔주고싶을 때

 

 

(2)active class 다음에 오는 li 만 바꿔주고싶을 때
+

+

 

구조적 가상 클래스 (Structural Pseudo-classes)

*pseudo['수도'] 가상

태그:first-child { }
태그:last-child { }
태그:nth-child(주고싶은 태그 순서){ };

 

동적 가상 클래스 선택자 (User Action Pseudo-classes)

태그명:active{}(마우스 클릭하는 그 찰나의 순간)

태그명:hover{} (마우스 올렸 을 경우)
태그명:focus{}(마우스 클릭 후)

CSS는 Cascading style sheet

CSS는 *Cascading style sheet 나중에 선언된 녀석이 이전에 선언된 스타일을 덮는다.
위의 사진에서 순서가 바꼈다면, active 가 먹히질 않았을 것이다.

focus 로 전반적인 것을 깔고 active로 .

CSS 우선순위

*주의*
inline style 방식 => css우선순위 무시함.

세계최강

button이 호버되었을 때 가상요소 after는~

참고

edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4

김버그의 HTML&CSS는 재밌다 - 구름EDU