css before, after 가상선택자 정리

가상선택자를 왜쓸까?

HTML에서 CSS class 가 지정되지 않았을경우 가상선택자를 이용해서 꾸미는게 가능하다 (맞나..?)

 

:before, :after 특정요소의 앞(:before) 또는 뒤(:after)에 지정한 내용 (텍스트나 이미지)를 추가할 수 있음

인라인 요소로 가짜속성이기 때문에

content="" 필수 속성으로 들어감!!!

(after 줄때 html에 표기하지 않고도 css의 부모 요소에 :after 삽입)

 

 

구글정의

선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있음

• :link - 방문한 적이 없는 링크
• :visited - 방문한 적이 있는 링크 
  
  
• :hover - 마우스를 롤오버 했을 때
  링크로 다른 페이지로 이동한후 링크컬러 변경
  a:visited {color: gray;}
  a:hover {color: red;}
  
• :active - 마우스를 클릭했을 때
  계속 클릭시 색 변경 드래그하지않는이상 사용놉
  a:active {background-color: blue;}
  
  
• :focus - 포커스 되었을 때 (input 태그 등)
• :first - 첫번째 요소
• :last - 마지막 요소
• :first-child - 첫번째 자식
• :last-child - 마지막 자식
• :nth-child(2n+1) - 홀수 번째 자식

* 클론: 한개를 사용하며 ::두개가 표준이지만 미적용될수잇음 (한개만 사용할것)