[유노코딩 css 17강] hover,active,focus,disabled,nth-child()

의사클래스란 가상클래스로 선택자에 추가하는 키워드.

hover는 입력필드에 커서를 갖다대면 변하는 클래스

 

일단 body에 박스하나 만들고

div 5개 박스를 띄엄띄엄 만든다.

body{

disply: flex;

justify-content: space-around;

}

 

 

hover

[type="button"]:hover{

   color: red;

}

평상시 상태에서

마우스 포인터가 올려져 있으면 빨간색으로 변한다.

 

 

active

버튼을 누르면

빨간색으로 변한다.

[type="button"]:active{

     color:red;

}

 

 

focus

input type placeholder 창에

커서가 놓여지면 변하게 됨.

 

 

disabled

바디 적용하는 값뒤에 넣으면 이 부분만 적용 안됨.

 

nth-child()

괄호 안에 숫자(n)를 넣어서 그 부분에만 적용하게 함.

itme 중 () 숫자만 셀렉하는 것

태그 상관없이 무조건 몇번째인지만 따지는 것이고

 

nth-of-type()

이것은 같은 태그끼리만 순서를 따짐.

 

 

:nth-child(N)= 부모안에 모든 요소 중 N번째 요소 A:nth-of-type(N)= 부모안에 A라는 요소 중 N번째 요소 :first-child= 부모안에 모든 요소 중 첫번째 요소 :last-child= 부모안에 모든 요소 중 마지막 요소 A:first-of-type= 부모안에 A라는 요소 중 첫번째 요소 A:last-of-type= 부모안에 A라는 요소 중 마지막 요소