[css] pseudo selector

pseudo selector는 태그가 어떤 특정 상태일 때의 스타일을 지정하는 방법이다.

button:hover{background-color:red;}

위 코드와 같이 button에 마우스가 올라간 상태일 때 button의 배경색을 빨갛게 해줄 수 있다.

pseudo selector 종류

1. pseudo class : 태그의 상태에 따라 선택한다.

• :hover  마우스를 올린 상태
• :focus  키보드 tab으로 선택되어 있는 상태
• :focus-within  자식이 포커스된 상태
• :active  클릭된 상태 
• :visited  방문한 링크일때
• :link  방문하지 않은 링크일때
• :first-child  first child 일때
• :last-child  last child 일때
• :nth-child(n)  n번째 child일때, 괄호 안에 n을 이용하여 식을 넣을 수 있다.

예를들어 2n을 넣으면 2의 배수인 태그만 선택하여 css를 적용한다.

even이나 odd와 같은 단어도 넣을 수 있다. even을 넣으면 짝수번째, odd를 넣으면 홀수번째 태그가 선택된다.

• :first-of-type  전체 html코드에서 특정 태그 중 첫번째로 나오는 태그를 선택한다.
• :last-of-type  마찬가지로 마지막으로 나오는 태그를 선택한다.
• :nth-of-type(n)  위의 nth-child처럼 괄호 안에 식을 넣을 수 있다.
• :not  지정한 태그가 아닌 다른 모든 태그를 선택한다.
• :root  변수에 값을 입력하듯이 기본 css를 설정할 수 있다.

:root css

css에 :root{css} 를 쓰고, '-' 2개와 원하는 변수명을 만들고 속성을 설정할 수 있다. 변수명에 띄어쓰기가 있으면 '-' 로 구분해줘야 한다.

:root를 쓰면 좋은 점은 전체의 속성을 변경해야 할 때 한번 만 수정하면 된다는 것이다.

css가 적용된 화면

 

한가지 요소에 대해 여러 개를 적용할 수 있다.

button에 대한 css

focus

 

tab으로 선택됐을 때  :focus의 css가 적용되어 보라색이다.

 

 

마우스로 클릭하고 있을 때 :active의 css가 적용되어 노란색이다.

 

 

마우스를 올리고 있을 때 :hover의 css가 적용되어 파란색이다.

 

 

css를 복합적으로 적용할 수도 있다.

div:hover a {background-color:red;} 

위 코드는 div에 마우스가 올라오면 자식인 a태그에 css를 적용한다.

2. pseudo elements : html 요소 중 

• 태그::selection  태그가 선택되면 css를 다르게 적용할 수 있다.

태그가 p와 같은 글자라면 드래그했을 때의 css를 바꿔준다.

• 태그::placeholder {css}   placeholder의 css를 바꿀 수 있다
• 태그::first-letter {css}  첫글자의 css
• 태그::first-line {css}  첫번째 줄의 css
• 태그::before { content:"텍스트";}
• 태그::after{ content:"텍스트";}

content 속성에 태그의 전이나 후에 삽입할 요소를 쓸 수 있다.

url("주소")를 삽입할 수도 있고, 텍스트를 쓸 수도 있다.

아래 주소를 참고하면 더 알아볼 수 있다.

developer.mozilla.org/ko/docs/Web/CSS/content

content