css - 고급 선택자

 

둘 이상의 선택자를 연결해서 특정한 요소를 선택하는 방법

id값이 containter인 요소와  이 요소를 부모로 하는 하위의 모든 p요소

 

자식 요소 : 자식에만 적용 시킴

컨테이너 밑에 있는 자식p에만 적용됨

 

 

형제 선택자

h1 ~ p

 

h1다음 첫번째p 태그에만 적용시키고 싶은 경우

인접 형제 선택자 : h1 + p

 

속성 선택자

 

href가 있는 속성에만 스타일을 지정하고 싶은 경우

 

 

href="#"인 경우에 cursor를 마우스로 하고 싶은 경우

 

 

---

가상 클래스

링크에 많이 사용 됨

 

:link

:visited

:hover

:active

순서를 지켜주어야 한다. 순서를 지키지 않으면 적용되지 않는 경우가 있음

link와 visited를 똑같이 묶어서 지정 

 

 

hover 마우스를 올렸을때

마우스 오버하면 배경은 짙은색, 글자는 흰색으로 보임

active 클릭하는 순간 스타일

클릭하면 배경이 빨간색으로 바뀜

 

focus 초점을 맞출때