코딩기록

CSS 선택자 내용 정리 본문

프론트엔드/CSS

CSS 선택자 내용 정리

빌럽스 2024. 1. 15. 17:34

오늘 배운 CSS 선택자(자식 선택자, 후손 선택자, 반응 선택자, 상태 선택자, 동위 선택자) 내용을 정리하였다.

자식 선택자

        지정된 요소 바로 하위에 존재하는 요소를 선택하는 선택자

        작성법
        선택자1 > 선택자2 {css코드 ;}

        - 선택자1: 부모 요소 선택(반드시 필요)
        - 선택자2: 자식 요소 선택(반드시 필요)

#parent-ul {
    background-color: brown;
}

#parent-ul > li {
    background-color: orange;
}

#parent-ul > li > span {
    /* #parent-ul > span : 안됨, 자식의 자식은 바로 지정 안됨 */
    background-color: teal;
}

 

후손(자손) 선택자

        지정된 요소의 모든 하위에 존재하는 요소를 선택하는 선택자

        작성법
        선택자1 선택자2 {css코드}

        - 선택자1 : 부모(조상) 요소 선택자
        - 선택자2 : 후손 요소 선택자
#test-div p {
    background-color: yellowgreen;
}

 

반응 선택자

        사용자의 움직임에 따라 반응하여 스타일이 달라지는 선택자
        (마우스 오버, 클릭유지..)

        - 요소를 클릭하고 있는 경우(:active)
        - 요소에 마우스가 올라가는 경우(:hover)

 

.div-cls {
    border: 1px solid black;
    width: 200px;
    height: 200px;
    background-color: grey;
    margin-bottom: 30px; /* 아래쪽 요소와의 간격 */

    cursor: pointer; /* 요소에 마우스 커서가 올라오면 손가락 모양으로 변경 */
   
}

#active-test:active {
    background-color: yellow;
}

#hover-test:hover {
    background-color: violet;
    width: 230px;
    height: 230px;
    transition-duration: 0.5s;
}

 

상태 선택자

        입력 양식(input, input 관련태그)의 상태에 따라 선택되는 선택자

        :focus -> 요소에 초점이 맞춰졌을 때
        :checked -> 요소가 체크되었을 때(radio, checkbox)
        :enabled / :disabled -> 요소가 사용 가능하거나 불가능한 상태일 때
#focus-test:focus {
    background-color: rgb(217, 230, 241);
    height: 80px;
}

input[name="fruits"]:checked {
    width: 30px;
    height: 30px;
    background-color: red; /* <- 안됨 / 체크박스는 크기를 제외한 스타일은 적용되지 않음 */
}

#test-div2 >input:enabled {
    background-color: aqua;
}

#test-div2 > input:disabled {
    background-color: red;
}

 

 

동위 선택자

        동위관계(동등한 위치 == 형제 관계)에서
        뒤(다음)에 위치한 요소를 선택하는 선택자.

        1) A선택자 + B선택자 {css코드;}
        A 바로 뒤에 있는 B요소 하나를 선택 (+)

        2) A선택자 ~ B 선택자 { css코드;}
        A 뒤에 있는 모든 B요소를 선택 (~ = 틸드(Tilde))

 

#div3 ~ div {
    background-color: khaki;
}
#div1 + div {
    background-color: burlywood;
}
 

'프론트엔드 > CSS' 카테고리의 다른 글

20240116 CSS 선택자, display, 여백, position 내용 정리  (1) 2024.01.16
'프론트엔드/CSS' Related Articles more