2.CSS 많이쓰이는 문법 & 규칙

pseudo class selector (의사 선택자)

의미	뜻
링크를 통해 방문하지 않은 요소 모두 선택	:link
링크를 통해 방문한 요소 모두 선택	:visited
마우스 커서가 링크위로 올라가 있는 요소 모두 선택	:hover
마우스로 클릭하고 있는 요소 모두 선택	:active
초점이 맞춰진(ex. tab 키) 요소 모두 선택	:focus
모든 자식 요소 중 앞에서 n번째 위치하는 자식 요소 모두 선택	:nth-child
모든 자식 요소 중 앞에서 n번째 위치하는 특정 요소 모두 선택	:nth-of-type
해당 선택자를 반대로 선택	:not
아무런 자식 요소를 가지지 않은 요소 모두 선택	:child

선택자

의미	표현
Id	#id_name
class	.class_name
tag	tag_name
선택자 조합	선택자 띄어쓰기 없이 표현 (ex. #id.class / .class1.class2)
전체	*
자손 선택자(하위 요소 중에 특정 타입의 요소 모두 선택)	띄어쓰기로 표현 (ex. div p { color:red; } )
자식 선택자(바로 밑에 하위 요소 중에 특정 타입의 요소 모두 선택)	> (ex. .class1 > .class2)
인접 동위 선택자( 바로 뒤에 동위 요소 선택)	+ (ex. div + p { color : red; } )
일반 동위 선택자(뒤에 존재 하는 동위 요소 모두 선택)	~ (ex. div ~ p {color ; red; } )
속성 선택자- 속성이름 선택자( 특정 속성을 가지고 있는 요소 모두 선택)	[ ] (ex. [role] {color: red; } )
속성 선택자 - 속성이름=속성값 선택자(특정 속성의 특정값을 가지고 있는 요소 모두 선택)	[ = / ^= / $= / *= ] (ex. 같음 → [role="admin"] { color: red; } 시작 → [role^="ad"] { color: red; } starts 끝 → [role$="min" {color : red;} 포함 → [role*="dm" {color:red;} )

---

Cascading (폭포형)

• 웹브라우저 사용자 저자가 동시에 같은 css를 지정
• 웹브라우저 < 사용자 < 저자
• 선택자 우선순위  (하나의 태그에 중첩적 css가 적용되었을때 구체적인 selector일수록 더 강력하다.)

      inline > id selector > class selector > tag selector > inherit attribute  (※!important로 뒤집을 수 있다)

• 이러한 우선순위를 가짐이 폭포와 비슷하게 생겼다고 하여 cascading style sheet라 명칭을 붙였다.

 

 

!important

• CSS는 기본적으로 나중에 설정한 값이 적용된다.

• selector의 유형에 따라 적용되는 우선순위가 다르다.
  • 상속속성 < tag < class < id < inline 순으로 강력하다.

• 위와같이 정해진 우선순위를 뒤집을 수 있는 것이 !important 이다. !important가 붙은 속성이 모든 상황에서 가장 우선적으로 적용된다.
  • !important가 충돌할때는 다시 위의 우선순위로 속성값이 적용된다.