CSS 선택자

미어캣의 개발일지·2022년 11월 19일

목록 보기

2/13

📖CSS 선택자

특정한 HTML 태그를 선택할 때 사용하는 기능

📖선택자 종류 개요

선택자 종류	선택자 형태	선택자 예
전체 선택자	*	*
태그 선택자	태그	h1
아이디 선택자	#아이디	#header
클래스 선택자	.클래스	.item
후손 선택자	선택자 선택자	header h1
자손 선택자	선택자 > 선택자	header > h1
속성 선택자	선택자[속성=값]	input[type=text]
	선택자[속성~=값]	div[data-role~=row]
	선택자[속성\|=값]	div[data-role\|=row]
	선택자[속성^=값]	div[data-role^=row]
	선택자[속성$=값]	div[data-role$=row]
	선택자[속성*=값]	div[data-role*=row]
동위 선택자	선택자+선택자	h1+div
	선택자~선택자	h1~div
구조 선택자	선택자:first-child	li:first-child
	선택자:last-child	li:last-child
	선택자:nth-child(수열)	li:nth-child(2n+1)
	선택자:nth-last-child(수열)	li:nth-last-child(2n+1)
	선택자:first-of-type	h1:first-of-type
	선택자:last-of-type	h1:last-of-type
	선택자:nth-of-type(수열)	h1:nth-of-type(2n+1)
	선택자:nth-last-of-type(수열)	h1:nth-last-of-type(2n+1)
반응 선택자	선택자:active	div:active
	선택자:hover	div:hover
상태 선택자	:checked	input:checked
	:focus	input:focus
	:enabled	input:enabled
	:disabled	input:disabled
링크 선택자	:link	a:link
	:visited	a:visited
문자 선택자	::first-letter	p::first-letter
	::first-line	p::first-line
	::after	p::after
	::before	p::before
	::selection	p::selection
부정 선택자	선택자:not(선택자)	li:not(.item)

참조 W3C 공식문서

📖CSS 선택자

📃전체 선택자

선택자 형태	설명
*	HTML 페이지 내부의 모든 태그를 선택

예시

<!DOCTYPE html>
    <head>
        <title>CSS3 Selector Basic</title>
        <style>
            h1 {
                color: red;
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <h1>CSS3 Selector Basic</h1>
    </body>
</html>

출력

📃태그 선택자

선택자 형태	설명
태그	특정한 태그 선택

예시

<!DOCTYPE html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        h1 {
            color: red; 
        }
        
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Nunc nisl turpis, aliquet et gravida non, facilisis a sem.</p>
</body>
</html>

출력

📃아이디 선택자

선택자 형태	설명
#아이디	아이디 속성을 가지고 있는 태그 선택

예시

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        #header {
            width: 800px; margin: 0 auto;
            background: red;
        }

        #wrap {
            width: 800px; margin: 0 auto;
            overflow: hidden;
        }

        #aside {
            width: 200px; float: left;
            background: blue;
        }

        #content {
            width: 600px; float: left;
            background: green;
        }
    </style>
</head>
<body>
    <div id="header">
        <h1>Header</h1>
    </div>
    <div id="wrap">
        <div id="aside">
            <h1>Aside</h1>
        </div>
        <div id="content">
            <h1>Content</h1>
        </div>
    </div>
</body>
</html>

출력

📃클래스 선택자

선택자 형태	설명
.클래스	특정한 클래스를 가지고 있는 태그 선택

예시

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        .select { color: red;}
    </style>
</head>
<body>
    <ul>
        <li class="select">Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li class="select">Lorem ipsum</li>
        <li>Lorem ipsum</li>
    </ul>
</body>
</html>

출력

여러개의 클래스 속성 사용가능

<h1 class="header select">Lorem  ipsum</h1>

📃후손 선택자

선택자 형태	설명
선택자A 선택자B	선택자A의 후손에 위치하는 선택자B를 선택

예시

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        #header h1 {
            color: red; 
        }

        #section h1 {
            color: orange;
        }
    </style>
</head>
<body>
    <div id="header">
        <h1 class="title">Lorem ipsum</h1>
        <div id="nav">
            <h1>Navigation</h1>
        </div>
    </div>
    <div id="section">
        <h1 class="title">Lorem ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</body>
</html>

출력

📃자손 선택자

선택자 형태	설명
선택자A > 선택자B	선택자A의 자손에 위치하는 선택자B를 선택

예시

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        #header > h1 {
            color: red;
        }

        #header > div > h1 {
            color: blue;
        }

        #section > h1 {
            color: orange;
        }
    </style>
</head>
<body>
    <div id="header">
        <h1 class="title">Lorem ipsum</h1>
        <div id="nav">
            <h1>Navigation</h1>
        </div>
    </div>
    <div id="section">
        <h1 class="title">Lorem ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</body>
</html>

출력

📃기본 속성 선택자

선택자 형태	설명
선택자[속성]	특정한 속성이 있는 태그 선택
선택자[속성=값][속성=값]	특정한 속성 안의 값이 특정 값과 같은 문서 객체를 선택

예시

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        input[type=text] {background: red;}
        input[type=password] {background: blue;}
    </style>
</head>
<body>
    <form>
        <input type="text">
        <input type="password">
    </form>
</body>
</html>

출력

📃문자열 속성 선택자

선택자 형태	설명
선택자[속성~=값]	속성 안의 값이 특정 값을 단어로 포함하는 태그 선택
선택자[속성\|=값]	속성 안의 값이 특정 값을 단어로 포함하는 태그 선택
선택자[속성^=값]	속성 안의 값이 특정 값으로 시작하는 태그를 선택
선택자[속성$=값]	속성 안의 값이 특정 값으로 끝나는 태그를 선택
선택자[속성*=값]	속성 안의 값이 특정 값을 포함하는 태그를 선택

예시

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        img[src$=png] {border: 3px solid red;}
        img[src$=jpg] {border: 3px solid green;}
        img[src$=gif] {border: 3px solid blue;}
    </style>
</head>
<body>
    <img src="./img/html .png" width="200" height="250" />
    <img src="./img/CSS.jpg" width="200" height="250" />
    <img src="./img/JS.gif" width="200" height="250" />
</body>
</html>

출력

📃동위 선택자

선택자 형태	설명
선택자A+선택자B	선택자A 바로 뒤에 위치하는 선택자B 선택
선택자A~선택자B	선택자A 뒤에 위치하는 선택자B 선택

예시

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
        h1 + h2 {
            color: red;
        }

        h1 ~ h2 {
            background-color: orange;
        }
    </style>
</head>
<body>
    <h1>Header - 1</h1>
    <h2>Header - 2</h2>
    <h2>Header - 2</h2>
    <h2>Header - 2</h2>
    <h2>Header - 2</h2>
</body>
</html>

출력

📃일반 구조 선택자

선택자 형태	설명
:first-child	형제 관계 중에서 첫번쨰에 위치하는 태그 선택
:last-child	형제 관계 중에서 마지막에 위치하는 태그 선택
:nth-child(수열)	형제 관계 중에서 앞에서 수열 번째에 태그 선택
:nth-last-child(수열)	형제 관계 중에서 뒤에서 수열 번쨰에 태그 선택

예시

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        ul {
            overflow: hidden;
        }

        li {
            list-style: none;
            float: left; padding: 15px;
        }

        li:first-child {
            border-radius: 10px 0 0 10px;
        }

        li:last-child {
            border-radius: 0 10px 10px 0;
        }

        li:nth-child(2n) {
            background-color: #FF0003;
        }

        li:nth-child(2n+1) {
            background-color: #800000;
        }
    </style>
</head>
<body>
    <ul>
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li>Fourth</li>
        <li>Fifth</li>
        <li>Sixth</li>
        <li>Seventh</li>
    </ul>
</body>
</html>

출력

📃형태 구조 선택자

선택자 형태	설명
:first-of-type	형제 관계 중에서 첫 번째로 등장하는 특정 태그 선택
:last-of-type	형제 관계 중에서 마지막으로 등장하는 특정 태그 선택
:nth-of-type(수열)	형제 관계 중에서 앞에서 수열 번째로 등장하는 특정 태그를 선택
:nth-last-of-type(수열)	형제 관계 중에서 뒤에서 수열 번째로 등장하는 특정 태그를 선택

예시

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        h1:first-of-type { color: red; }
        h2:first-of-type { color: red; }
        h3:first-of-type { color: red; }
    </style>
</head>
<body>
    <h1>Header - 1</h1>
    <h2>Header - 2</h2>
    <h3>Header - 3</h3>
    <h3>Header - 3</h3>
    <h2>Header - 2</h2>
    <h1>Header - 1</h1>
</body>
</html>

출력

📃반응 선택자

선택자 형태	설명
:active	사용자가 마우스로 클릭한 태그 선택
:hover	사용자가 마우스를 올린 태그 선택

예시

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
        h1:hover {
            color: red;
        }

        h1:active {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>User Action Selector</h1>
</body>
</html>

출력

📃상태 선택자

선택자 형태	설명
:checked	체크 상태의 input 태그 선택
:focus	초점이 맞추어진 input 태그 선택
:enabled	사용 가능한 input 태그 선택
:disabled	사용 불가능한 input 태그 선택

예시

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
        /*  input 태그가 사용 가능할 경우에
            background-color 속성에 white 키워드를 적용합니다. */
        input:enabled {
            background-color: white;
        }

        /*  input 태그가 사용 불가능할 경우에
            background-color 속성에 gray 키워드를 적용합니다. */
        input:disabled {
            background-color: gray;
        }

        /*  input 태그에 초점이 맞춰진 경우에
            background-color 속성에 orange 키워드를 적용합니다. */
        input:focus {
            background-color: orange;
        }
    </style>
</head>
<body>
    <h2>Enabled</h2>
    <input />
    <h2>Disabled</h2>
    <input disabled="disabled">
</body>
</html>

출력

📃링크 선택자

선택자 형태	설명
:link	href 속성을 가지고 있는 a 태그 선택
:visited	방문했던 링크를 가지고 있는 a 태그 선택

예시

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        a { text-decoration: none; }
        a:visited { color: red; }

        /*  href 속성을 가지고 있는 a 태그 뒤의 공간에
            "- (href 속성)"을 추가힙니다. */
        a:link::after { content: ' - ' attr(href); }
    </style>
</head>
<body>
    <h1><a>Nothing</a></h1>
    <h1><a href="https://www.naver.com">네이버</a></h1>
    <h1><a href="https://github.com/">Github</a></h1>
</body>
</html>

출력

📃시작 문자 선택자

선택자 형태	설명
::first-letter	첫 번째 글자 선택
::first-line	첫 번째 줄 선택

예시

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        p::first-letter { font-size: 3em;}
        p::first-line { color: red; }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Aenean ac erat et massa vehicula laoreet consequat et sem.</p>
</body>
</html>

출력

📃전후 문자 선택자

선택자 형태	설명
::after	태그 뒤에 위치하는 공간 선택
::before	태그 앞에 위치하는 공간 선택

예시

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        p { counter-increment: rint; }
        p::before { content: counter(rint) "."; }
        p::after { content: "-" attr(data-page) " page"; }
        p::first-letter { font-size: 3em }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Aenean ac erat et massa vehicula laoreet consequat et sem.</p>
</body>
</html>

출력

📃반응 선택자

선택자 형태	설명
::selection	사용자가 드래그한 글자 선택

예시

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        p::selection { background: black; color: red;}
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Aenean ac erat et massa vehicula laoreet consequat et sem.</p>
</body>
</html>

출력

📃반응 선택자

선택자 형태	설명
:not(선택자)	선택자를 반대로 적용

예시

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        /*  input 태그 중에서 type 속성값이 password가 아닌 태그의
            background 속성에 red 키워드를 적용합니다. */
        input:not([type=password]) {
            background: red;
        }
    </style>
</head>
<body>
    <input type="password" />
    <input type="text" />
    <input type="password" />
    <input type="text" />
</body>
</html>

출력

미어캣의 개발일지

이게 왜 안되지? 이게 왜 되지?

이전 포스트

CSS 기초

다음 포스트

CSS 선택자

CSS

📖CSS 선택자

📖선택자 종류 개요

📖CSS 선택자

📃전체 선택자

📃태그 선택자

📃아이디 선택자

📃클래스 선택자

📃후손 선택자

📃자손 선택자

📃기본 속성 선택자

📃문자열 속성 선택자

📃동위 선택자

📃일반 구조 선택자

📃형태 구조 선택자

📃반응 선택자

📃상태 선택자

📃링크 선택자

📃시작 문자 선택자

📃전후 문자 선택자

📃반응 선택자

📃반응 선택자

CSS 기초

CSS3 단위

0개의 댓글