하루의 일상💜

[CSS] CSS 선택자 본문

CSS

[CSS] CSS 선택자

도하루박 2022. 9. 17. 16:17
반응형
전체 선택자

스타일을 모든 요소에 적용할 때 사용한다.

주로 하위 요소에 한꺼번에 스타일을 적용할 때 사용한다.

 *{
        color: red;
    }

 

 

클래스 선택자

클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용한다.
같은 클래스 이름을 가지는 요소들을 모두 선택해주고 스타일 적용 시 선택자에 ".클래스명"을 작성해준다.

아래와 같이 전체선택자를 선택했더라고 클래스 선택자로 색상을 변경해주면 더 구체화된 요소로 스타일이 지정이 된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 선택자</title>
    <style>
        * {
            color: aqua;
        }
        .text-red {
            color: blueviolet;
        }
    </style>
</head>
<body>
    <p class="text-red">
        텍스트 색상 변경
    </p>
</body>
</html>

 

 

id 선택자

아이디 선택자는 특정 요소를 선택할 때 사용한다.
스타일을 지정할 때 사용하고, 선택자 부분에 "#아이디명"을 작성한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 선택자</title>
    <style>
        #apple {
            color: brown;
        }

    </style>
</head>
<body>
    <p id="apple">
        텍스트 색상 변경
    </p>
</body>
</html>

 

※ 아이디와 클래스 선택자의 차이점
Class 속성 값에 여러 개의 이름을 작성할 수 있고 각 이름은 공백으로 구분한다.
id 속성 값에는 단 한 개의 이름만 작성한다.
Class는 여러 태그에서 동일한 이름으로 묶어주는 목적이 있고,
id는 한 개의 태그를 특정시킬 때 즉, 중복 없이 사용하는 목적이 있다.

 

id와 class의 우선순위
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>아이디와 클래스</title>
    <style>
        .red {
            color: red;
        }
        #blue {
            color: blue;
        }
    </style>
</head>
<body>
    <p class="blue red">banana</p>
    <p class="red" id="blue">peach</p>
</body>
</html>

위와 같이 class에서는 blue red 라는 여러개의 이름을 작성할 수 있고 공백으로 구분했다.

class로 red색상을 적용했지만 id 가 더 구체적이므로 class보다 우선순위가 된다.

 

[결과창]

banana

peach

반응형
저작자표시 (새창열림)

'CSS' 카테고리의 다른 글

[CSS] 캐스케이딩 (Cascading) 우선순위, inherit  (0) 2022.09.17
'CSS' Related Articles more