pseudo-class selectors

category

simple selectors
combinator selectors
pseudo-class selectors
pseudo-elements selectors
attribute selectors

pseudo-class?

pseudo-class는 selector의 상태를 표현하기 위하여 사용된다.
상태에는 hover,visited,focus.. 등이 있다.

syntax

selector:pseudo-class {
property: value;
}
출저:https://www.w3schools.com/css/css_pseudo_classes.asp
https://www.w3schools.com/css/css_pseudo_classes.asp

example

a tag

/* unvisited link */
a:link {
  color: #FF0000;
}

/* visited link */
a:visited {
  color: #00FF00;
}

/* mouse over link */
a:hover {
  color: #FF00FF;
}

/* selected link */
a:active {
  color: #0000FF;
}

각각
link: 방문 전
visited: 방문 후
hover: 마우스 over
active: link를 클릭하고, 새탭에 키기까지(말로 설명하기 애매함)

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.
출저: https://www.w3schools.com/css/css_pseudo_classes.asp

순서에 관한 내용도 존재한다.

combinator selector와의 조합

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

div가 hover이고 descendant element인 p에 대하여 display가 바뀌므로 tooltip기능을 css로도 구현할 수 있다.

first-child pseudo-class

first-child인 상태를 나타낸다. 상태라는 말이 이해도를 높이는데,

p:first-child {
  color: blue;
}

아래의 예시는 자칫 이름으로 인하여 p element안에 첫번 째 요소를 선택하는 것으로 햇갈릴 수 있다(제가 그랬읍니다.) 상태라는 말을 기억한다면 p element인데 본인이 첫번 째 요소를 선택한다고 생각하면 됩니다.!

first-of-type

first-child가 아니라 처음으로 등장하는 상태를 의미합니다.

p:first-of-type {
  color: blue;
}

<div>
<span>예시<span>
<p>파란색<p/>
<p>default<p/>
</div>

first child와 비교하였을 때, 더 잘 이해할 수 있습니다.

lang pseudo-class

언어에 대한 attribute를 주었을 때 언어또한 상태로 보고 해당 언어를 selector로 지정하여 style줄 수 있습니다.

q:lang(no) {
  quotes: "~" "~";
}
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

what i learend

• css파일로도 상태관리가 가능하다는 느낌이 든다.
• 유용한 pseudo elements가 많이 보인다.
• 다른 사람이 작성한 style 및 기능(tooltip을 css로 구현한 것처럼 기능을 이해하기 위해서)을 이해하기 위해서 selectors에 대한 공부가 중요하다는 것을 배웠다.