요소의 특별한 상태를 정의하기 위해 쓰인다.
예를 들어,
마우스 커서를 요소어 hover했을 경우 꾸밈
links를 방문했거나 방문하지 않았을 경우를 다르게 꾸밈
요소가 포커싱됐을 때 꾸밈
문법
selector:pseudo-class{
property:value;
}
anchor pseudo-classes
links는 다른 방식으로 표시될 수 있다.
a:hover는 a:link, a:visited 이후에 나와야 한다. a:active는 a:hover 뒤에 나와야 한다.
순서는 link, visited, hover, active
pseudo-classes and css classes
anchor 태그의 클래스를 지정한 뒤 의사 클래스로 효과를 준다. 마우스를 갖다 대면 지정된 것만 색이 바뀜
hover on <div>
<div> 요소에 :hover 의사 클래스를 사용
simple tooltip hover
툴팁은 마우스 갖다대면 간단한 정보를 표시하기 위해 나오는 창임.
<div>요소에 마우스를 갖다대면 <p>요소가 툴팁마냥 나타남
처음에 p요소의 display:none으로 해서 보여주지 않고 배경, 패딩 등의 속성을 설정해준다.
div:hover를 하면 자손인 p요소의 display속성이 none에서 block으로 바뀐다. 툴팁처럼 보이게 됨
:first-child pseudo-class
어떤 요소의 첫번째 자식이 지정된 요소면 매칭
match the first <p> element
match the first <i> element in all <p> elements
모든 <p>요소 중에서 첫번째로 나오는 <i>요소 매칭
match all <i> elements in all first child <p> elements
<p>요소의 첫번째 자식 안에 있는 모든 <i>요소 매칭
:lang pseudo-class
다른 언어들에 대해서 특별한 규칙을 정의할 수 있게 해준다.
:lang은 lang="no"으로 인용 마크를 <q> 요소에 정의한다.
'CSS' 카테고리의 다른 글
CSS Opacity / Transparency (0) | 2018.11.10 |
---|---|
CSS Pseudo-elements (0) | 2018.11.09 |
CSS Combinators (0) | 2018.11.09 |
CSS Layout - display:inline-block (0) | 2018.11.08 |
CSS Layout - float and clear (0) | 2018.11.08 |