[CSS 기초] CSS 선택자(Selector), CSS 적용 우선순위

CSS 선택자(Selector)는 무엇인가?

말 그대로 요소를 선택하게 만들어주는 것.

CSS는 HTML 요소들의 스타일을 정의한다. 스타일을 정의하기 위해서는 스타일을 정의할 요소를 선택해야하는데 이 때 사용되는 것이 선택자(Selector)이다.

위의 이미지에서 h1이 선택자고 괄호 안의 속성(property 혹은 attribute)과 값들로 h1의 스타일을 꾸며주게 된다.

이러한 선택자에는 여러 종류가 있다.

CSS 선택자(Selector) 종류

1. 기본선택자

전체 선택자, 태그 선택자, id 선택자, 클래스 선택자

1-1. 전체 선택자 (Universal Selector)

패턴	설명	예시
*	HTML 문서 안의 모든 요소들을 선택한다.	* { color: red; }

<!DOCTYPE html>
<html>
<head>
    <title>Selector</title>
    <style>
        /* 전체 선택자: 모든 태그들을 선택함 */
        * { color: red; }
    </style>
</head>
<body>
    <h3>사과종류</h3>
    <ul>
        <li>홍옥</li>
        <li>홍로</li>
        <li>아오리</li>
        <li>부사</li>
    </ul>
</body>
</html>

1-2. 태그 선택자 (Type Selector)

패턴	설명	예시
태그명	해당 태그명을 가진 요소들을 선택한다.	p { color: red; }

<!DOCTYPE html>
<html>
<head>
    <title>Selector</title>
    <style>
        /* 태그 선택자: 해당 태그를 선택함 */
        li { color: blue; }
    </style>
</head>
<body>
    <h3>사과종류</h3>
    <ul>
        <li>홍옥</li>
        <li>홍로</li>
        <li>아오리</li>
        <li>부사</li>
    </ul>
    <span>사과는 맛있다.</span>
</body>
</html>

1-3. Id 선택자 (Id Selector)

패턴	설명	예시
#id 속성값	해당 id속성 값을 가지는 요소를 선택한다. id 속성 값은 재사용이 불가능한 유일한 값이다.	#menu { color: red; }

<!DOCTYPE html>
<html>
<head>
    <title>Selector</title>
    <style>
        /* id 선택자: 해당 id 속성값을 가진 요소를 선택함 */
        #desc { color: blue; }
    </style>
</head>
<body>
    <h3>사과종류</h3>
    <ul>
        <li>홍옥</li>
        <li>홍로</li>
        <li>아오리</li>
        <li>부사</li>
    </ul>
    <span id="desc">사과는 맛있다.</span>
</body>
</html>

1-4. Class 선택자 (Class Selctor)

패턴	설명	예시
.class 속성값	해당 class 속성 값을 가지는 요소를 선택한다. class 속성 값은 재사용이 가능하다.	.menu { color: red; }

<!DOCTYPE html>
<html>
<head>
    <title>Selector</title>
    <style>
        /* class 선택자: 해당 class 속성값을 가진 요소를 선택함 */
        .point { color: blue; }
    </style>
</head>
<body>
    <h3>사과종류</h3>
    <ul>
        <li class="point">홍옥</li>
        <li class="point">홍로</li>
        <li>아오리</li>
        <li>부사</li>
    </ul>
    <span>사과는 맛있다.</span>
</body>
</html>

2. 속성 선택자 (Attribute Selector)

패턴	설명	예시
선택자[속성]	해당 속성을 가지는 선택자를 선택한다.	a[href]

<!DOCTYPE html>
<html>
<head>
    <title>Selector</title>
    <style>
        /* 속성 선택자: [] 안 해당 속성을 가진 요소를 선택함 */
        /* href 속성을 갖는 a 태그를 선택 */
        a[href] { color: green; }
    </style>
</head>
<body>
    <h3>사과종류</h3>
    <ul>
        <li><a href="#">홍옥</a></li>
        <li><a href="#">홍로</a></li>
        <li><a href="#">아오리</a></li>
        <li><a href="#">부사</a></li>
    </ul>
</body>
</html>

이 속성 선택자는 다양하게 활용할 수 있다.

패턴	설명	예시
선택자[속성 = 값]	값과 일치할 때 선택됨	a [ target = "_blank" ]
선택자[속성 ~= 값]	여러 값 중 해당 값이 포함되어 있을 때 선택됨	h3 [ class ~= "title1" ]
선택자[속성 \|= 값]	해당 값이 포함되어(하이픈 포함) 있을 때 선택됨	li [ class \|= "apple" ]
선택자[속성 ^= 값]	해당 값으로 시작할 때 선택됨	li [ class ^= "g" ]
선택자[속성 $= 값]	해당 값으로 끝났을 때 선택됨	a [ href $= "html" ]
선택자[속성 *= 값]	해당 값이 일부 포함 되어 있을 때	a [ href *= "n" ]

(예시는 식별을 위해 띄워쓰기를 했으나 코드에는 띄워쓰기를 하면 안됨)

<!DOCTYPE html>
<html>
<head>
    <title>Selector</title>
    <style>
        a[href] { color: blue; }

        /* 속성값과 일치할 때 선택됨 */
        a[target="_blank"] { font-weight: bold; }

        /* 여러 값 중 해당 값이 포함되어 있을 때 선택됨 */
        h3[class~="title1"] { font-size: 40px; }

        /* 해당 값이 포함되어(하이픈 포함) 있을 때 선택됨 */
        li[class|="apple"] { color: red; }

        /* 해당 값으로 시작할 때 선택됨 */
        li[class^="g"] { color: green; }

        /* 해당 값으로 끝났을 때 선택됨 */
        a[href$="html"] { font-size: 20px; }

        /* 해당 값이 일부 포함 되어 있을 때 */
        a[href*="n"] { border: 1px solid red; }
    </style>
</head>
<body>
    <h3 class="sub title1">과일종류</h3>
    <ul>
        <li class="apple-red"><a href="" target="_blank" >홍옥</a></li>
        <li class="apple-red"><a href="#">홍로</a></li>
        <li class="green"><a href="www.o9html">아오리</a></li>
        <li><a href="#">부사</a></li>
    </ul>
    <ul>
        <li>바나나</li>
        <li>복숭아</li>
        <li><a href="naver.com">파인애플</a></li>
        <li>멜론</li>
    </ul>
</body>
</html>

3. 복합선택자 (Combinator)

자식 선택자, 후손 선택자, 일반 형제 선택자, 인접 형제 선택자

복합 선택자는 두 개 이상의 선택자 요소들이 모인 선택자다.

3-1. 자식(자손) 선택자 (Child Combinator)

자손(자식) 요소는 부모요소의 1 레벨 하위에 속하는 요소.

후손 요소는 부모요소의 n 레벨 하위에 속하는 요소.

패턴	설명	예시
선택자A > 선택자B	부모 요소인 A의 1레벨 하위에 있는 자식요소 B를 직접 선택	div < span { color: red; }

<!DOCTYPE html>
<html>
<head>
    <title>Selector</title>
    <style>
    	/* 자식선택자: div 직속 하위에 있는 span만 선택*/
        div > span { color: red; }
    </style>
</head>
<body>
    <h3 class="sub title1">과일종류</h3>
    <div>
        <p>사과는 맛있습니다.</p>
        <span>사과</span>
        <p>원숭이는 <span>바나나</span>를 좋아해</p>
    </div>
</body>
</html>

3-2. 후손 선택자 (Descendant Combinator)

부모 요소의 1레벨 하위에있는 자식요소만을 선택하는 자식 선택자와 다르게 후손 선택자는 n레벨 하위에 있는 모든 자식 요소들을 선택한다.

패턴	설명	예시
선택자A 선택자B	선택자A의 모든 후손 요소 B를 선택한다.	div span { color: red; }

<!DOCTYPE html>
<html>
<head>
    <title>Selector</title>
    <style>
    	/* 후손 선택자: div의 하위에 있는 모든 span을 선택함 */
        div span { color: red; }
    </style>
</head>
<body>
    <h3 class="sub title1">과일종류</h3>
    <div>
        <p>사과는 맛있습니다.</p>
        <span>사과</span>
        <p>원숭이는 <span>바나나</span>를 좋아해</p>
    </div>
</body>
</html>

3-3. 형제 선택자 (Sibling Combinator)

형제 선택자는 형제 관계 (같은 부모를 갖고 있으며 같은 레벨의 위치에 있음) 에서 뒤에 위치하는 요소를 선택한다.

3-3. (1) 일반 형제 선택자 (General Sibling Combinator)

패턴	설명	예시
선택자A ~ 선택자B	A의 형제요소 중 A의 뒤에 위치하는 B요소들을 선택한다.	li ~ li { color: #fff; }

<!DOCTYPE html>
<html>
<head>
    <title>Selector</title>
    <style>
    	/* 일반형제 선택자 */
        
        /* h3 뒤에 위치한 형제 요소 p만 선택함*/
        h3 ~ p { color: green; }
        
        /* 가장 앞에있는 li 뒤에 위치하는 형제 li만 선택함 */
        li ~ li { color: red; }
    </style>
</head>
<body>
    <p>h3 앞에 위치한 p</p>
    <h3>Heading3</h3>
    <p>h3 뒤에 위치한 p</p>
    <ul>
        <li>사과</li>
        <li>딸기</li>
        <li>토마토</li>
    </ul>
    <ul>
        <li>바나나</li>
        <li>망고</li>
        <li>레몬</li>
    </ul>
</body>
</html>

3-3. (2) 인접 형제 선택자 (Adjacent Sibling Combinator)

패턴	설명	예시
선택자A + 선택자B	A의 형제 요소 B중 바로 뒤에 위치하는 B 요소를 선택한다.	div + p { color: red; }

<!DOCTYPE html>
<html>
<head>
    <title>Selector</title>
    <style>
    	/* 인접형제 선택자 */
        /* div의 바로 뒤에오는 형제요소 p만 선택 */
        div + p { color: red; }
    </style>
</head>
<body>
    <div>
        <p>자식 p 1</p>
        <p>자식 p 2</p>
        <p>자식 p 3</p>
    </div>
    <p>div 바로 뒤에 위치하는 형제 p1</p>
    <p>형제 p 2</p>
    <p>떨어져있는 p 3</p>
</body>
</html>

4. 가상클래스 선택자 (Pseudo-Class Selector)

동적 선택자, UI 요소 상태 선택자, 구조 가상클래스 선택자, 부정 선택자, 정합성 체크 선택자

가상 클래스는 실제로 존재하는 요소에 가상의 클래스를 만들어 스타일을 지정하는 것을 의미하며 '요소가 특정 상태일 때'의 스타일을 설정할 때 사용된다.

특정 상태일 때란,

요소에 마우스가 올라와있을 때
링크에 방문하지 않았을 때 / 방문 했을 때

등이 있고 콜론 : 을 앞에 붙여서 사용된다.

4-1. 링크 선택자 (Link pseudo-classes) / 동적 선택자 (User action pseudo-classes)

링크 선택자는 방문 혹은 방문 하지않은 링크의 스타일을 변경할 수 있는 선택자이며,

동적 선택자란 가상클래스 선택자 중에서도 html 요소의 상태에 따라 스타일을 변경할 수 있는 선택자이다. 사용자의 액션에 따라 (마우스온, 클릭) 스타일을 다르게 지정하는 데에 사용한다.

패턴	설명	예시
선택자:link	셀렉터가 방문하지 않은 링크일 때 선택한다.	a:link { color: red; }
선택자:visited	셀렉터가 방문한 링크일 때 선택한다.	a:visited { color: red; }
선택자:hover	셀렉터에 마우스를 올렸을 때 선택한다.	a:hover { color: red; }
선택자:active	셀렉터를 클릭한 상태일 때 선택한다.	a:active { color: red; }
선택자:focus	셀렉터에 포커스 된 상태일 때 선택한다.	input:focus { color: red; }

포커스 된 상태 : 주로 입력칸 등이 선택 되었을 때. 사용자가 요소를 클릭 또는 탭하거나 키보드 tab키로 선택했을 때.

4-2. UI 요소 상태 선택자 (UI element states pseudo-class)

UI 요소(주로 Input)의 상태에 따라 스타일을 지정할 때 사용한다.

패턴	설명	예시
선택자:checked	셀렉터가 체크된 상태일 때 선택한다.	input:checked + label { color: red; }
선택자:enabled	셀렉터가 사용가능한 상태일 때 선택한다.	input:enabled { color: blue; }
선택자:disabled	셀렉터가 사용 불가능한 상태일 때 선택한다.	input:disabled { color: gray; }

4-3. 구조 가상 클래스 선택자 (Structural pseudo-classes)

구조 가상 클래스 선택자는 특정 위치의 요소를 찾아 선택한다.

요소들 중 첫 번째 요소를 선택하거나, 마지막 요소를 선택하여 스타일을 꾸며주는 등의 방식으로 사용한다.

패턴	설명	예시
선택자:first-child	셀렉터 요소 중 첫 번째 자식 요소를 선택한다.	li:first-chlid { color: red; }
선택자:last-child	셀렉터 요소 중 마지막 자식 요소를 선택한다.	li:last-child { color: blue; }
선택자:nth-child(n)	셀렉터 요소 중 앞에서 n 번째인 자식 요소를 선택한다.	p:nth-child(n) { color: gray; }
선택자:nth-last-child(n)	셀렉터 요소 중 뒤에서 n 번째인 자식 요소를 선택한다.	p:nth-last-child(n) { color: gray; }

4-4. 부정 선택자 (Nagation pseudo-classes)

패턴	설명	예시
:not(선택자)	셀렉터에 해당하지 않는 모든 요소들을 선택한다.	ul li:not(.on) { color: blue; }

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    	/* .on이 붙지 않은 li만 선택 */
        ul li:not(.on) { color: blue; }
    </style>
</head>

<body>
    <ul>
        <li>list1</li>
        <li class="on">on이 붙은 list2</li>
        <li>list3</li>
    </ul>
</body>
</html>

4-5. 정합성 체크 선택자

정합성 체크란?

: 데이터에 대해서, 설정된 처리 규칙과의 일관성 여부를 확인하는 검사.

사용자의 데이터 입력을 받아올 시 (로그인 등 사용자 정보 입력 시), 정해진 패턴과 일치할 때 / 일치하지 않을 때의 스타일을 지정할 때 사용한다.

패턴	설명	예시
:valid(선택자)	정합성 검증이 성공한 input/form 요소를 선택한다.	input:valid { background-color:green; }
:invalid(선택자)	정합성 검증이 실패한 input/form 요소를 선택한다.	input:invalid { background-color: red; }

<!DOCTYPE html>
<html>
<head>
    <style>
     	/* 정합성 체크 성공한 input은 배경색 초록색으로 */
        input:valid { background-color: green; }
        /* 정합성 체크 실패한 input은 배경색 붉은색으로 */
        input:invalid { background-color: red; }
    </style>
</head>
    
<body>
    <ul>
        <li>list1</li>
        <li class="on">on이 붙은 list2</li>
        <li>list3</li>
    </ul>
    <form action="#">
        <fieldset>
            <legend>로그인</legend>
            아이디: <input type="text"> <br><br>
            패스워드: <input type="password"> <br><br>
            핸드폰번호: <input type="text" pattern="^\d{3}-\d{3,4}-\d{4}$">
        </fieldset>
        
    </form>
</body>
</html>

5. 가상요소 선택자 (Pseudo-Element Selector)

실제로 존재했던 요소에 가상으로 클래스를 주는 가상 클래스와는 다르게, 가상 요소는 실제로 존재하지 않는 가상의 요소를 만들어 스타일을 지정할 수 있다.

콜론을 두 개를 (::) 앞에 붙여 사용한다.

패턴	설명	예시
선택자::after	요소의 뒤에 있는 공간을 선택한다.	li::after { content:"+"; color: red; }
선택자::before	요소의 앞에 있는 공간을 선택한다.	li:before { content:"+"; color: red; }
선택자::first-letter	요소의 첫 번쩨 글자를 선택한다.	p::first-letter { color: red; }
선택자::first-line	요소의 첫 번쩨 문장을 선택한다.	p::first-lline { color: red; }
선택자::selection	셀렉터에 포커스 된 상태일 때 선택한다.	input:focus { color: red; }

그 외

태그와 함께 쓰는 선택자

p.center { text-align: center; }

그룹 선택자

: 두 개 이상의 요소에 공통적으로 스타일을 지정할 때 사용하는 선택자.

h1, p { text-align: center; }

css 적용 우선순위

동일한 DOM 엘리먼트에 여러 CSS가 적용되어 있으면 우선순위에 따라 CSS가 덮어쓰이게 된다.

우선 순위의 순서는

!important > Inline-style > ID 선택자 > Class 선택자, pseudo 선택자(가상 선택자 ex. :hover) > 태그 선택자

- !important

.center { text-align: center !important }

속성 값 뒤에 !important를 붙여 적용 시킨다.

- Inline-style

< p style='background-color: #00f'; >

HTML에서 태그 안에 style을 지정한다.

!important와 inline style 은 충돌이 일어날 수 있어 실무에서 사용을 제한하는 경우가 많다.

'Programming > CSS' 카테고리의 다른 글

[CSS 기초] 엘리먼트 수직, 수평 중앙 정렬하기 (vertical align, flex, text-align, position...) (0)	2021.11.06
[CSS 기초] 박스모델 Box Model (margin, padding, border) (0)	2021.11.02
[CSS 기초] 블록 요소(block element) vs 인라인 요소(inline element) vs 인라인 블록 요소 (inline-block element) (0)	2021.11.02
[CSS 기초] CSS background 배경을 제어하는 속성 (0)	2021.11.01
[CSS 기초] CSS 텍스트 스타일 (0)	2021.10.28