[CSS] 가상 클래스, 가상 요소, 속성 선택자 + 강제 상속

🌱가상 클래스 선택자 ':' 기호가 항상 붙음

:hover {}

• 마우스 커서가 올라가 있는 동안 CSS 내용 적용

:active {}

• 마우스를 클릭하고 있는 동안에만 적용

:focus {}

• focus되면 선택 --> HTML 대화형 콘텐츠만 가능 ex) input, a, button, label, select 등
• focus가 안되는 요소인데 포커스를 하고 싶을 때는 tabindex = "-"을 쓰면 됨

:fisrt-child {}

• 선택자 A의 형제 요소 중 첫째라면 선택 (그 요소가 첫째가 아니면 적용 x)

.fruits span:first-child { } 

:last-child {}

• 선택자 A의 형제 요소 중 막내라면 선택

.fruits h3:last-child { } 

:nth-child(n) {}

• 선택자 A 형제 요소 중 n째만 선택
• n은 0부터 시작하고 2n, 2n+1, -n+3 등 다양하게 수식을 넣을 수 있음

.fruits *:nth-child(2){ }

:not(xyz) {}

• 선택자 xyz가 아닌 요소를 선택하라는 뜻

 .fruits *not(span) = span태그 빼고 적용

🌱가상 요소 선택자 '::' 기호가 항상 붙음

• 가상 요소 선택자는 content라는 속성이 꼭 있어야 함. before/after - content가 항상 세트
• before/after 선택자는 인라인 요소로 쓰이는데 display:block; 을 입력하면 인라인 요소를 블록 요소로 바꿀 수 있음 (실제로 많이 쓰임)

::before

• ABC::before <- 선택자 ABC 요소 내부 앞에 내용(content)을 삽입

.box::before{content: “앞!”} 

::after

• ABC::after <- 선택자 ABC 요소 내부 뒤에 내용(content)을 삽입

.box::after {content: “뒤!”} 

🌱속성 선택자 '[]' 기호 사용

[ABC]

• 속성 ABC를 포함한 요소 선택
• 대괄호 [] 안에 속성을 넣으면 그 해당 속성 만 적용

 [disabled] { } 

[ABC = "XYZ"]

• 속성 ABC를 포함하고 값이 XYZ인 요소 선택

[type=”password”] {} 

🌱상속과 강제상속

inherit

• 주로 글자/문자 관련 속성들이 상속하는데 상속이 되지않는 속성까지 강제로 상속시킬 때

.parent {
  position: absolute;
  background-color: red;
  width: 100px;
  height: 100px;
}

.child {
  position: inherit; /* 강제 상속 받아 position: absolute; 와 동일 */
  background-color: blue; 
  width: 50px;
  height: 50px;
}