본문 바로가기
Web/HTML5 & CSS

HTML5(6) - CSS 기본문법2

by SeleniumBindingProtein 2022. 1. 28.
728x90
반응형

1. 가상 클래스 선택자 (Pseudo Classes Selectors)
    1) hover
        - E:hover 
        - E에 마우스(포인터)가 올라가 있는 동안에만 E 선택
    2) active
        - E:active
        - E를 마우스로 클릭하는 동안에만 E 선택
    3) focus
        - E:focus        
        - E가 포커스 된 동안에만 E 선택
    4) first-child 
        - E:first-child
        - E가 형제 요소 중 첫번째 요소라면 선택     
    5) last-child
        - E:last-child
        - E가 형제 요소 중 마지막 요소라면 선택       
    6) nth-child(n)
        - E:nth-child(n)
        - E가 형제 요소 중 n번째 요소라면 선택      
    7) nth-of-type(n)            
        - E:nth-of-type(n)
        - E의 타입(태그이름)과 동일한 타입인 형제 요소 중 E가 n번째 요소라면 선택
    8) 부정 선택자
        - E:not(S)
        - S가 아닌 E 선택     

2. 가상 요소 선택자 (Pseudo-Elements Selectors)
    1) before
        - E::before
        - E 요소 내부의 앞에, 내용(content)을 삽입    
    2) after
        - E::after
        - E 요소 내부의 뒤에, 내용(content)을 삽입        

3. 속성 선택자 (Attribute Selectors)
    1) [attr]
        - 속성 attr을 포함한 요소 선택
    2) [attr=value]
        - 속성 attr을 포함하며 속성 값이 value인 요소 선택 
    3) [attr^=value] 
        - 속성 attr을 포함하며 속성 값이 value로 시작하는 요소 선택      
    4) [attr$=value]   
        - 속성 attr을 포함하며 속성 값이 value로 끝나는 요소 선택          
                

728x90
반응형

'Web > HTML5 & CSS' 카테고리의 다른 글

HTML5(8) - SB  (0) 2022.01.28
HTML5(7) - BS  (0) 2022.01.28
HTML5(5) - CSS 기본문법  (0) 2022.01.28
HTML5(4) - 문서구조  (0) 2022.01.28
HTML5(3) - review  (0) 2022.01.28

댓글