JUST GO

[선택자] 선택자 종류 본문

CSS/학습내용

[선택자] 선택자 종류

root_go 2022. 10. 3. 16:53

전체 선택자

- 전체 선택자(Universal Selector)는 주로 모든 요소를 선택할 때 사용한다.

- 다음과 같이 작성한다.("는 없는 것으로 한다.)

* {

"속성" : "속성 값";

"속성" : "속성 값";

"속성" : "속성 값";

}

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>전체 선택자</title>
    <style>
        div > * {
            color: red;
        }
    </style>
</head>
<body>
    <a>나는 노터치</a>
    <div>
        <a class="red">a도 바뀌고</a>
        <b class="red">b도 바뀌고</b>
        <i>i도 바뀌고</i>
        <strong>strong도 바뀌고</strong>
        <u>u도 바뀌고</u>
    </div>
</body>
</html>
 

그룹 선택자

- 그룹 선택자(Group Selector)는 동일한 한 개 이상의 CSS 속성들을 여러 선택자에 적용하고자 할 때 사용한다.

- 다음과 같이 작성한다. 콤마(,)로 구분하여 여러개 나열 가능.("는 없는 것으로 한다.)

"선택자 1", "선택자 2", "선택자 3" {

"속성" : "속성 값";

"속성" : "속성 값";

"속성" : "속성 값";

}

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>그룹 선택자</title>
    <style>
        div > a,
        div > b,
        div > u {
            color: red;
        }
    </style>
</head>
<body>
    <a>나는 노터치</a>
    <div>
        <a class="red">a도 바뀌고</a>
        <b class="red">b도 바뀌고</b>
        <i>i는 안 바뀌고</i>
        <strong>strong은 안 바뀌고</strong>
        <u>u도 바뀌고</u>
    </div>
</body>
</html>
 

'CSS > 학습내용' 카테고리의 다른 글

[속성] CSS 속성  (2) 2022.10.04
[의사클래스] 의사클래스 종류  (0) 2022.10.03
[결합자] 결합자 종류  (0) 2022.10.03
[선택자] ID 선택자  (1) 2022.10.03
[선택자] 클래스 선택자  (0) 2022.10.03
'CSS/학습내용' Related Articles more