CSS3 선택자

 

 

CSS3 선택자

 

 

 연결 선택자

선택자와 선택자를 연결해 적용 대상을 한정하는 선택자이다.

 

① 하위 선택자

상위 요소인 section 요소 안에 있는 모든 p 요소의 글자 색을 파란색으로 바꾼다는 의미가 된다.

section p {color: blue;}

 

 

② 자식 선택자

자식 요소에 스타일을 적용하는 선택자이다. 두 요소 사이에 '>'를 표시해 부모 요소와 자식 요소를 구분한다. 

#container > p { color: blue; }

 

자식 선태자와 하위 선택자의 다른 점을 보기 위한 예시이다. 

<div id="container">
    <p>제목 색상은 파란색</p>
    <div>
        <p>내용은 기본 색상</p>
    </div>
    <p>끝 내용 색상</p>
</div>

 

자식 선택자의 경우) container 의 하위 요소인 p 요소에만 스타일이 적용된다.

#container > p { color: blue; }

 

하위 선택자의 경우) container 의 모든 p 요소에 스타일이 적용된다.

#container p { color: blue; }

 

 

③ 인접 형제 선택자

같은 부모를 가진 형제 요소 중 첫번째 동생 요소에만 스타일이 적용된다. (선착순 하나) 다음 예시로 설명하자면 p 요소와 h1 은 같은 레벨 요소이면서 p 요소 이후 맨 먼저 오는 h1 요소에 스타일을 적용한다.

p + h1 { color: blue; }

 

예시) 

<div id="container">
    <p>제목 색상은 파란색</p>
    <h1>끝 내용의 색상</h1>
    <h1>끝 내용의 색상2</h1>
</div>

 

 

④ 형제 선택자

형제 요소들의 모든 요소들에 스타일을 적용한다. 인접 형제 선택자와 다른 점은 모든 형제 요소에 다 적용된다는 것이다.

p ~ h1 { color: blue; }

 

예시)

<div id="container">
    <p>제목 색상은 파란색</p>
    <h1>끝 내용의 색상</h1>
    <h1>끝 내용의 색상2</h1>
</div>

 

 

 속성 선택자

지정한 속성을 가진 요소를 찾아 스타일을 적용된다.

 

① [속성] 선택자

지정한 속성을 가진 요소를 찾아 스타일을 적용한다.

a[target] {
    background-color: aquamarine;
}

 

예시)

<ul>
    <li><a href="http://www.naver.com" target="_blank">메뉴1</a></li>
    <li><a href="http://www.naver.com" target="_top">메뉴2</a></li>
    <li><a href="http://www.naver.com">메뉴3</a></li>
</ul>

 

 

② [속성 = 값] 선택자

주어진 속성과 속성 값이 일치하는 요소를 찾아 스타일을 적용한다.

a[target="_blank"] {
    background-color: aquamarine;
}

 

예시)

<ul>
    <li><a href="http://www.naver.com" target="_blank">메뉴1</a></li>
    <li><a href="http://www.naver.com" target="_top">메뉴2</a></li>
    <li><a href="http://www.naver.com">메뉴3</a></li>
</ul>

 

 

③ [속성 ~= 값] 선택자

여러 속성 값 중에 해당 값이 포함되어 있는 요소를 찾아 스타일이 적용된다. 

[class ~= "button"] {
    background-color: aquamarine;
}

 

예시) class 속성 중에 button 이라는 단어가 있는 요소 모두 적용됨

<ul>
    <li><a href="http://www.naver.com" target="_blank">메뉴1</a></li>
    <li><a href="http://www.naver.com" class="button">메뉴2</a></li>
    <li><a href="http://www.naver.com" class="button flat">메뉴3</a></li>
</ul>

 

 

④ [속성 |= 값] 선택자

특정 값이 포함된 속성을 가진 요소를 찾아 스타일이 적용된다. 하이픈으로 연결해 한 단어 값을 이루는 요소에도 모두 적용된다.

[class |= "button"] {
    background-color: aquamarine;
}

 

예시)

<ul>
    <li><a href="http://www.naver.com" class="button-flat">메뉴1</a></li>
    <li><a href="http://www.naver.com" class="buttons">메뉴2</a></li>
    <li><a href="http://www.naver.com" class="button flat">메뉴3</a></li>
</ul>

 

 

⑤ [속성 ^= 값] 선택자

특정 값으로 시작하는 속성을 가진 요소를 찾아 스타일을 적용한다.

a[title ^= "me"] {
    background-color: aquamarine;
}

 

예시) title 속성 중 me 로 시작하는 요소를 찾아 스타일이 적용된다.

<ul>
    <li><a href="http://www.naver.com" title="menu1">메뉴1</a></li>
    <li><a href="http://www.naver.com" title="hidden-menu">메뉴2</a></li>
    <li><a href="http://www.naver.com" title="menu3">메뉴3</a></li>
</ul>

 

 

⑥ [속성 $= 값] 선택자

특정 값으로 끝나는 속성을 가진 요소를 찾아 스타일을 적용한다.

a[href $= "xls"] {
    background-color: aquamarine;
}

 

예시) herf 속성 중 xls 단어를 가진 요소만 스타일이 적용된다.

<ul>
    <li><a href="http://www.naver.com" title="menu1">메뉴1</a></li>
    <li><a href="intro.xls" title="hidden-menu">메뉴2</a></li>
    <li><a href="http://www.naver.com" title="menu3">메뉴3</a></li>
</ul>

 

 

⑦ [속성 *= 값] 선택자

값의 일부가 일치하는 속성을 가진 요소를 찾아 스타일을 적용된다. 앞이든 뒤든 상관없이 값만 포함되면 된다.

a[href *= "naver"] {
    background-color: aquamarine;
}

 

예시)

<ul>
    <li><a href="http://www.naver.com" title="menu1">메뉴1</a></li>
    <li><a href="intro.xls" title="hidden-menu">메뉴2</a></li>
    <li><a href="http://www.naver.com" title="menu3">메뉴3</a></li>
</ul>

 

 

 가상 클래스

연결 선택자나 속성 선택자는 HTML 마크업 안에 포함되어 있는 값들을 직접 확인하고 지정할 수 있었지만 가상 요소와 가상 클래스는 말 그대로 보이지 않는 부분을 특정할 수 있다.

 

① 사용자 동작에 반응하는 가상 클래스

표기	설명
:link	방문하지 않은 링크에 스타일을 지정할 수 있다.
:visited	방문한 링크에 스타일을 적용할 수 있다.
:active	웹 요소를 활성화했을 때의 스타일을 적용할 수 있다.
:hover	웹 요소에 마우스 커서를 올려놓을 때의 스타일을 적용할 수 있다.
:focus	웹 요소에 초점이 맞추어졌을 때 스타일을 적용할 수 있다. (Tab 키)

 

 

② UI 요소 상태에 따른 가상 클래스

표기	설명
:enabled, :disabled	요소를 사용할 수 있을 때와 없을 때의 스타일을 지정한다.
:checked	라디오 박스나 체크 박스에서 항목을 선택했을 때의 스타일 지정 할 수 있다.

 

 

예시) 라디오 박스 체크했을 때의 스타일 지정

input:checked + span {
    color: blue;
}

<label>
    <input type="radio" name="subject" value="english"><span>영어</span>
</label>
<label>
    <input type="radio" name="subject" value="math"><span>수학</span>
</label>
<label>
    <input type="radio" name="subject" value="speaking"><span>회화</span>
</label>

 

 

예시) 선택 박스에 마우스를 올려놓을 때의 스타일 지정

.button {
    text-align: center;
    width: 100px;
    padding: 5px;
    background-color: brown;
    color: beige;
}

.button:hover {
    background-color: chocolate;
}

<div class="button">
    <p>메인 메뉴</p>
</div>

 

 

 구조 가상 클래스

 

① :nth-child(n) 과 :nth-last-child(n)

:nth-child(n) 은 앞에서부터 n 번째 자식 요소에 스타일을 적용한다. :nth-last-child(n) 은 뒤에서부터 n 번재 자식 요소에 스타일을 적용한다. n 은 위치를 나타내는 곳으로 an+b 처럼 수식을 사용할 수도 있다. n 은 0부터이다.

/* div 요소 안에서 네 번째 자식 요소인 p요소에 스타일을 지정한다. */
div p:nth-child(4) { background: blue; }

/* div 요소 안에서 홀수 번째로 나타나는 자식 요소인 p 요소에 스타일을 지정한다. */
div p:nth-child(odd) { background: blue; }

/* div 요소 안에서 홀수 번째로 나타나는 자식 요소인 tr요소에 스타일을 지정한다. */
div tr:nth-child(2n+1) { background: blue; }

/* div 요소 안에서 짝수 번째로 나타나는 자식 요소인 p요소에 스타일을 지정한다. */
div p:nth-child(even) { background: blue; }

/* table 요소 안에서 짝수 번째로 나타나는 자식 요소인 tr요소에 스타일을 지정한다. */
table tr:nth-child(2n) { background: blue; }

/* class가 container 인 요소 안에서 뒤에서 두번째 자식 요소인 p 요소에 스타일을 지정한다. */
.container p:nth-last-child(2) { background: blue; }

 

예시) nth-child(2n+1)

<style>
    table tr:nth-child(2n+1) {
        background: lightgray;
        color: black;
    }
</style>

<body>
	<table border="1">
		<tr><td>블루베리</td></tr>
		<tr><td>사과</td></tr>
		<tr><td>딸기</td></tr>
		<tr><td>레몬</td></tr>
		<tr><td>배</td></tr>
		<tr><td>유자</td></tr>
	</table>
</body>

 

예시) nth-last-child(3)

<style>
    table tr:nth-last-child(3) {
        background: lightgray;
        color: black;
    }
</style>

<body>
	<table border="1">
		<tr><td>블루베리</td></tr>
		<tr><td>사과</td></tr>
		<tr><td>딸기</td></tr>
		<tr><td>레몬</td></tr>
		<tr><td>배</td></tr>
		<tr><td>유자</td></tr>
	</table>
</body>

 

 

② :nth-of-type(n) 과 :nth-last-of-type(n)

:nth-of-type(n) 은 앞에서부터 n 번째 요소에 스타일을 적용한다. 

 

 

③ :first-child 와 :last-child

:first-child 는 첫번째 자식 요소스타일을 적용하고 last-child 는 마지막 자식 요소에 스타일을 적용한다.

 

예시)

ul.navi li:first-child {
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
}

ul.navi li:last-child {
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
}

.navi li {
    width: 100px;
    list-style-type: none;
    display: inline-block;
    border: 1px solid #000000;
    padding: 10px;
    text-align: center;
}

<ul class="navi">
    <li>Home</li><li>HTML</li><li>CSS</li><li>JavaScript</li>
</ul>

 

 

④ :first-of-type 와 :last-of-type

:first-of-type 은 형제 요소들 중 첫번째 요소에 스타일을 적용한다. :last-of-type 은 형제 요소들 중 마지막 요소에 스타일을 적용한다. 

 

예시)

ul.navi li:first-of-type {
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
}

ul.navi li:last-of-type {
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
}

.navi li {
    width: 100px;
    list-style-type: none;
    display: inline-block;
    border: 1px solid #000000;
    padding: 10px;
    text-align: center;
}

<ul class="navi">
    <li>Home</li><li>HTML</li><li>CSS</li><li>JavaScript</li>
</ul>

 

 

⑤ :only-child 와 :only-of-type

:only-child 는 부모 안에 자식 요소가 유일하게 하나일 때 스타일이 적용된다. :only-of-type 은 자신이 유일한 요소일 때 스타일이 적용된다. :only-child 에는 부모 안에 다른 자식 요소가 있으면 안되지만 :only-of-type 은 다른 요소가 있어도 된다. 단, only-of-type 에 대항되는 요소는 단 하나여야 한다.

 

예시)

<style>
    .container1 p:only-child {
        color: burlywood;
    }

    .container2 p:only-of-type {
        color: cadetblue;
    }
</style>

<body>
	<div class="container1">
		<p>환영합니다.</p>
	</div>

	<div class="container2">
		<p>홈 트레이닝.</p>
		<h4>감사합니다.</h4>
	</div>
</body>

 

 

⑥ ::before 와 ::after

::before 는 특정 요소의 앞에 지정한 내용을 추가한다. 마찬가지로 ::after 는 특정 요소의 뒤에 지정한 내용을 추가한다. 글자, 이미지 등을 넣을 수 있다. 다른 선택자를 통해 내용을 추가할 경우에는 돔이라고 하는 문서에 포함이 되어 자바스크립트에서 접근하여 이용하고 수정할 수 있다. 반면 ::before 와 ::after 는 가상 요소로 돔 문서 안에 존재하는 것이 아니다. 단지 조건에 맞춰 화면에 보여줄 뿐으로 자바스크립트에서 접근할 수 없다.

 

예시)

<style>
    ul li:nth-child(2n)::after {
        content: "NEW!";
        font-size: x-small;
        padding: 2px 4px;
        background-color: crimson;
        color: white;
        margin-left: 10px;
    }
</style>

<body>
	<h4>제목 목록</h4>
	<ul>
		<li>바나나</li>
		<li>딸기</li>
		<li>수박</li>
		<li>샤인머스켓</li>
	</ul>
</body>