본문 바로가기
프론트엔드/CSS

[CSS] 선택자 Selector -

by jinwanseo 2021. 2. 9.
728x90

CSS Selectors (선택자)

 

Css에서 각 노드에 효과를 주기 위해

노드를 선택해야 하는데,

노드의 선택은 아래와 같은 선택자를 통해 가능하다.

 

[선택자 (Selectors)]

Basic Selectors
Type Selectors 엘리먼트 명
Class Selectors .클래스명
Id Selectors #아이디명
Attribute Selectors [속성명=속성값]
Combinators
Decendent Selectors 부모노드 자식노드
Child Selector 부모노드 > 자식노드
Adjacent Sibling Selector 형제노드 + 형제노드
General Sibling Selector 형제노드 ~ 형제노드

 

[개념 설명]

 

1. Type Selectors

엘리먼트 이름으로 대상을 선택

같은 이름의 엘리먼트가 여러 개라면,

여러 개의 대상을 동시에 선택하게 된다.

 

[예제]

<!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 Selector Example</title>
    <!--CSS-->
    <style>
    	//모든 li 태그에 적용
        li {
            margin : 30px;
            color : tomato;
            font-size : larger;
            font-weight: bold;
        }
        li:hover {
            cursor: pointer;
            color: royalblue;
            font-size : x-large;
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <main>
        <section>
            <nav>
                <li>메뉴1</li>
                <li>메뉴2</li>
                <li>메뉴3</li>
                <li>메뉴4</li>
                <li>메뉴5</li>
            </nav>
        </section>
    </main>
</body>
</html>

 

[결과]

 

css TypeSelector 예제

2. Class Selectors 

클래스 명을 대상으로 선택

같은 이름의 클래스가 여러 개라면,

여러 개의 엘리먼트를 동시에 선택하게 된다.

 

[예제]

 

<!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 Selector Example</title>
    <!--CSS-->
    <style>
        .sampleClass {
            cursor: pointer;
            margin : 30px;
            color : tomato;
            font-size : larger;
            font-weight: bold;
        }
        .selected {
            color: royalblue;
            font-size : x-large;
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <main>
        <section>
            <nav>
                <li class="sampleClass selected">메뉴1</li>
                <li class="sampleClass">메뉴2</li>
                <li class="sampleClass">메뉴3</li>
                <li class="sampleClass">메뉴4</li>
                <li class="sampleClass">메뉴5</li>
            </nav>
        </section>
        <script>
        //자바스크립트는 예제를 위해 추가. 모르면 pass 해도 무관하다.
        //class는 여러개가 선택이 가능하고, Css 효과를 위해 추가 및 삭제를 
        //반복할수 있다는 사실만 기억
            document.querySelector('nav').addEventListener('click',e=>{
                if(e.target.nodeName === 'LI'){
                    //기존 Selected 삭제
                    document.querySelector('.selected').classList.remove('selected');
                    //클릭된 엘리먼트에 Selected 클래스 추가
                    e.target.classList.add('selected');
                }
            });
        </script>
    </main>
</body>
</html>

 

[결과 출력]

 

class Selector 에제

3. Id Selectors 

아이디 속성으로 대상을 선택

아이디는 문서에 한 개만 할당되는

유니크한 값이기 때문에

최소한으로 할당하는 게 좋다.

 

[예제]

 

<!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 Selector Example</title>
    <!--CSS-->
    <style>
        li {
            cursor: pointer;
            margin: 30px;
            color: tomato;
            font-size: larger;
            font-weight: bold;
        }
        #selected {
            color : royalblue;
            font-size : x-large;
            font-weight: bolder;
        }
    </style>
</head>

<body>
    <main>
        <section>
            <nav>
                <li id="selected">메뉴1</li>
                <li>메뉴2</li>
                <li>메뉴3</li>
                <li>메뉴4</li>
                <li>메뉴5</li>
            </nav>
        </section>
    </main>
</body>

</html>

 

[결과 출력]

 

4. Attribute Selectors

속성 값을 통하여 대상을 선택.

같은 속성이 여러 개라면

여러 개의 엘리먼트를 동시에 선택하게 된다.

 

[예제]

<!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 Selector Example</title>
    <style>
        li {
            list-style: none;
            margin : 16px;
        }
        input[type="text"] {
            border : 2px solid grey;
        }
        input[type="text"]:hover{
            color : green;
            border : 3px solid tomato;
        }
    </style>
</head>

<body>
    <main>
        <section>
            <nav>
                <li><input type="text" value="메뉴1"/></li>
                <li><input type="text" value="메뉴2"/></li>
                <li><input type="text" value="메뉴3"/></li>
                <li><input type="text" value="메뉴4"/></li>
                <li><input type="text" value="메뉴5"/></li>
            </nav>
        </section>
    </main>
</body>

</html>

 

[결과 출력]

 

 

5. Decendent Selectors

두 개의 엘리먼트명 사이에 공백으로 선택자 사용

첫 번째 엘리먼트 내두 번째 엘리먼트 명을 가진

모든 엘리먼트를 선택

(자식 엘리먼트뿐만 아니라 모든 자손 엘리먼트)

 

[예제]

nav 태그 내 모든 자손 li 선택

<!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 Selector Example</title>
    <style>
        nav li {
            color : green;
            font-weight: bolder;
            margin : 15px;
            cursor : pointer;
        }
    </style>
</head>

<body>
    <main>
        <section>
            <nav>
                <li>메뉴1</li>
                <li>메뉴2</li>
                <li>메뉴3</li>
                <li>메뉴4</li>
                <li>메뉴5</li>
                <ul>
                    <li>서브메뉴1</li>
                    <li>서브메뉴2</li>
                    <li>서브메뉴3</li>
                </ul>
            </nav>
        </section>
    </main>
</body>

</html>

 

[결과 출력]

 

 

6. Child Selector

두 개의 엘리먼트 사이에 > 표시로 사용.

첫 번째 엘리먼트 내 두 번째 엘리먼트 명을 

가진 엘리먼트 여러 개를 선택

(자식 엘리먼트만 선택)

 

[예제]

<!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 Selector Example</title>
    <style>
        nav > li {
            color : green;
            font-weight: bolder;
            margin : 15px;
            cursor : pointer;
        }
    </style>
</head>

<body>
    <main>
        <section>
            <nav>
                <li>메뉴1</li>
                <li>메뉴2</li>
                <li>메뉴3</li>
                <li>메뉴4</li>
                <li>메뉴5</li>
                <ul>
                    <li>서브메뉴1</li>
                    <li>서브메뉴2</li>
                    <li>서브메뉴3</li>
                </ul>
            </nav>
        </section>
    </main>
</body>

</html>

 

[결과 출력]

 

 

7. Adjacent Sibling Selector

첫 번째 명시된 엘리먼트 바로 뒤 형제 중

하나의 엘리먼트를 선택

 

[예제]

<!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 Selector Example</title>
    <style>
        li {
            color : green;
            font-weight: bolder;
            margin : 15px;
            cursor : pointer;
        }
        ul + li {
            color : royalblue;
        }
    </style>
</head>

<body>
    <main>
        <section>
            <nav>
                <li>메뉴1</li>
                <li>메뉴2</li>
                <li>메뉴3</li>
                <ul>
                    <li>서브메뉴1</li>
                    <li>서브메뉴2</li>
                    <li>서브메뉴3</li>
                </ul>
                <li>메뉴4</li>
                <li>메뉴5</li>
            </nav>
        </section>
    </main>
</body>

</html>

 

[결과 출력]

 

 

8. General Sibling Selector

첫번째 명시된 엘리먼트 다음 형제 중

두 번째 명시된 엘리먼트 명에 해당되는

모든 엘리먼트를 선택

 

[예제]

 

<!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 Selector Example</title>
    <style>
        li {
            color : green;
            font-weight: bolder;
            margin : 15px;
            cursor : pointer;
        }
        ul ~ li {
            color : royalblue;
        }
    </style>
</head>

<body>
    <main>
        <section>
            <nav>
                <li>메뉴1</li>
                <li>메뉴2</li>
                <li>메뉴3</li>
                <ul>
                    <li>서브메뉴1</li>
                    <li>서브메뉴2</li>
                    <li>서브메뉴3</li>
                </ul>
                <li>메뉴4</li>
                <li>메뉴5</li>
            </nav>
        </section>
    </main>
</body>

</html>

 

[결과 출력]

 

728x90
저작자표시

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

[프론트엔드 CSS] 엘리먼트 내 스크롤바 생성 overflow-y  (0) 2021.02.20
[CSS] user-select 텍스트 선택 효과 없애기  (0) 2021.02.17
[CSS] position - static, relative, absolute, fixed  (0) 2021.02.10
[CSS] 부모의 속성을 따르는 inherit  (0) 2021.02.10
[Css] css의 로드 style, link, import  (0) 2021.02.10

관련글

댓글

티스토리툴바