본문 바로가기
Web Development/CSS

7. The World of CSS Selectors

by 사향낭 2022. 3. 15.

복습을 무조건 해야겠다는 깨달음을 얻었다!

 

학습에는 무조건 복습이 필요하다.

 

 

 

69 - 71. Universal & Element & Id & Class Selectors

 

 

Universal selector: *

 

Element selector: element

 

Id selector: #id

 

Class selector: .class

 

 

 

72 - 74. The Descendant & Adjacent & Direct-Descendant & Attribute selectors

 

 

Descendant selector: element element

 

Adjacent selector: element + element

 

Direct-descendant selector: element > element

 

Attribute selector: element[attribute="what you want"]

 

 

 

75. Pseudo Classes

 

 

element:pseudo-class-name

(pseudo-class-name 종류: hover, clicked, checked, nth-of-type 등)

 

 

 

76. Pseudo Elements

 

 

element::pseudo-element-name

(pseudo-element-name 종류: after, before, first-letter, first-line, selection 등)

 

 

 

77 - 78. The CSS Cascade & Specificity

 

 

동일한 elment에 중복된 style이 있다면 더 specific한 것이 win.

 

specificity가 같다면 마지막 style이 win

 

Specificity 우선순위는 다음과 같음.

 

ID Selectors > Class, Attribute, & Pseudo-Class Selectors > Element and Pseudo-Element Selectors

 

 

 

80. Inline Styles & Important

 

 

Inline style과 !important keyword는 위 우선순위를 무시하고 언제나 이긴다.

 

 

 

 

 

'Web Development > CSS' 카테고리의 다른 글

10. Responsive CSS & Flexbox  (0) 2022.03.17
9. Other Assorted Useful CSS Properties  (0) 2022.03.16
8. The CSS Box Model  (0) 2022.03.15
6. CSS: The Very Basics  (0) 2022.03.15

댓글