본문 바로가기

CSS

CSS Pseudo-classes

요소의 특별한 상태를 정의하기 위해 쓰인다.


예를 들어,

마우스 커서를 요소어 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