CSS [10] – 가상 클래스, Psedo Classes 사용법

CSS Tutorial – Full Course for Beginners

Lesson 19 – Pseudo

가상 클래스

nav a,
nav a:visited {
  color: #000;
}

nav a:hover,
nav a:focus {
  color: hsla(0, 0%, 20%, 0.6);
}

nav a:active {
  color: red;
}

nav a:any-link {
  color: #000;
}

nav :is(a:hover, a:focus) {
  color: hsla(0, 0%, 20%, 0.6);
}

nav a:active {
  color: red;
}

• 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드
• 선택자를 DRY(Don’t repeat yourself)하게 만들기 위해 nav a:hover, nav a:focus를 nav :is(a:hover, a:focus)로 축약해서 사용할 수 있음
• a, a:visited는 a:any-link

:is(header, footer) {
  position: sticky;
  background-color: #1e293b;
  color: whitesmoke;
  text-align: center;
}


header {
  top: 0;
  color: red;
}

• :is 사용시 specificity 점수가 더 올라가서 아래쪽에 header 스타일이 override 되지 않음

• :where 사용시 specificity에 영향을 주지 않음

.card:target {
  border: 2px solid rebeccapurple;
}

• :target 사용시 선택된 콘텐츠에 스타일 적용

.card img[alt] {
  border: 10px solid red;
}

• alt 속성을 가지고 있는 img 태그

.card img:not([alt]) {
  border: 10px solid red;
}

• alt 속성을 가지고 있지 않은 img 태그

.card:nth-child(2) {
  background-color: papayawhip;
}

• html 상에서 2번째 child에 있는 콘텐츠
• css로 order를 변경할 경우 등은 해당되지 않음
• .card:nth-child(even), .card:nth-child(odd)

::after, ::before

.card figcaption::after {
  content: ' hello';
}

.card figcaption::before {
  content: '✨';
  display: block;
}

.card p {
  position: relative;
}

.card p::before {
  content: open-quote;
  font-size: 3em;
  position: absolute;
  top: -0.25em;
  left: -0.5em;
}

.card p::after {
  content: close-quote;
  font-size: 3em;
  position: absolute;
  top: -0.25em;
  right: -0.5em;
}

• ::before , ::after 선택자 이전과 다음에 html에 추가하지 않고 특정 콘텐츠를 추가할 수 있음

가상 요소

.card figcaption::first-letter {
  font-size: 3rem;
}
.card figcaption::first-line {
  font-size: 3rem;
}

• first-letter, first-line 선택 가능