CSS 스타일 문서에서 사용하는 고급 선택자의 종류

지나·2022년 3월 15일

http://flukeout.github.io/
CSS 선택자 연습하기 게임 !!!

고급 선택자

고급 선택자는 두가지로 분류할 수 있다.

🥑 연결 선택자
🥑 속성 선택자

🥑 연결 선택자

둘 이상의 선택자를 연결하여 스타일을 적용할 요소를 지정한다.
조합 선택자, 콤비네이터 선택자, 콤비네이션 셀렉터 라고 부르기도 한다.
연결 선택자에는 하위선택자 자식선택자 인접형제선택자 형제선택자 가 있다.

하위 선택자 ( 상위요소 하위요소 )

상위요소 하위요소 {
				속성: 속성값;}

부모요소에 포함된 모든 하위요소를 선택하여 스타일을 적용한다.
자식요소뿐만 아니라 손자요소, 손자의 손자요소 등 모든 하위요소를 선택한다.

section p {
			color: blue;}

<!--section 태그 안의 모든 p 요소에 스타일을 적용한다.-->

자식 선택자 ( 상위요소 > 자식요소 )

상위요소 > 자식요소 {
					속성: 속성값;}

부모요소에 포함 된 하위요소 중, 바로 한단계 아래의 자식 요소만 선택하여 스타일을 적용한다.

section > p {
				color: blue;}
                
<!--section 안의 모든 p 요소 중, 바로 한단계 아래의 p 요소에만 스타일을 적용한다.-->

인접 형제 선택자 ( 형요소 + 동생요소)

형요소 + 동생요소 {
				속성: 속성값;}

문서에서 부모요소가 같을 경우 형제 관계라고 한다.
형제 관계인 요소들 중 먼저 나오는 요소를 형요소, 나중에 나오는 요소를 동생요소라고 한다.
인접 형제 선택자는 형제 관계의 요소들 중, 형요소와 첫번째 동생요소만 선택하여 스타일을 적용한다.

<style>
	h1 + p {
			color: white;}
</style>
        
        
<section>
    <h1>인접 형제 선택자</h1>
    <p>동생1</p>
    <p>동생2</p>
    <p>동생3</p>
</section>
    
<!--section 이라는 같은 부모를 가진 형제들 중, 형요소인 h1 과 첫번째 동생인 p 만 선택하여 스타일을 적용한다.-->

형제 선택자

형요소 ~ 동생요소 {
				속성: 속성값;}

형요소 뒤에 오는 모든 동생요소들을 선택하여 스타일을 적용한다.

<style>
	h1 + p {
			color: white;}
</style>


<section>
    <h1>형제 선택자</h1>
    <p>동생1</p>
    <p>동생2</p>
    <p>동생3</p>
</section>
    
<!--section 이라는 같은 부모를 가진 형제들 h1 과 p, p, p 모두를 선택하여 스타일을 적용한다.-->

🥑 속성 선택자

특정 속성이나 속성값이 적용 된 요소를 선택하여 스타일을 적용한다.

대괄호 [], 이퀄 =, 틸드이퀄 ~=, 슬래시이퀄 |=, 캐럿이퀄 ^=, 달러이퀄 $=, 별이퀄 *= 문자들을 이용하여 명시한다.

[속성이름] 선택자

상위요소[속성이름] {
			속성: 속성값;}

특정 속성을 가지고 있는 요소들을 선택하여 스타일을 적용한다.

<style>
	a[target] {
				color: blue;}
</style>

<div>
	<a href="#" target="_blank">link</a>
	<a href="#">link</a>
</div>
    
<!--a 태그에 target 이라는 속성을 가진 모든 요소를 선택하여 스타일을 적용한다.-->

위 코드는 a 태그에 target 이라는 속성을 가진 요소를 선택하여 스타일을 적용할 것을 선언하고 있다.

target 속성을 가지지 않는 a 태그인 <a href="#">link</a> 에는 color:blue; 스타일이 적용되지 않는다.

[속성이름="속성값"] 선택자

상위요소[속성이름="속성값"] {
						속성: 속성값;}

특정 속성과 속성값을 가지고 있는 요소들을 선택하여 스타일을 적용한다.

<style>
	a[target="_blank"] {
						color: white;}
</style>

<nav>
	<a href="#" target="_self">link</a>
	<a href="#" target="_blank">link</a>
	<a href="#" target="_blannk">link</a>
</nav>

<!--a 태그에 target 속성에 속성값 _blank 를 가진 요소를 선택하여 스타일을 적용한다.-->

위 코드는 a 태그의 target 속성에 속성값 _blank 를 가지는 요소를 선택하여 스타일을 부여할 것을 선언하고 있다.

target 속성에 속성값 _self 를 가지는 요소와 속성값 _blannk 를 가지는 요소에는 스타일을 적용하지 않는다.
속성과 속성값 이름이 반드시 일치해야 적용되니 다른 속성값을 가지진 않았는지, 오타를 내진 않았는지 주의하자
띄어쓰기가 들어가거나, 다른 단어와 붙어있거나, 하이픈으로 연결되어 있으면 선택 되지 않는다

[속성이름~="속성값"] 선택자

상위요소[속성이름~="속성값"] {
						속성: 속성값;}

특정 속성을 가진 모든 요소들 중, 해당 속성값을 가지는 요소를 선택하여 스타일을 적용한다.

<style>
	div[class~="orange"] {
							background-color: gray;}
</style>


<body>
	<div id="choice">
        <div class="orange">menu</div>      <!--스타일 적용-->
        <div class="orange ade">menu</div>  <!--스타일 적용-->
        <div class="orange-juice">menu</div>
        <div class="orangejam">menu</div>
    </div>
</body>
        
<!--div 태그의 class 속성을 가진 여러 요소들 중, 속성값 orange 를 가지는 요소를 선택하여 스타일을 적용한다.-->

위 코드는 div 태그의 여러 class 속성들 중, 속성값 oarnge 를 가지는 요소를 선택하여 스타일을 부여할 것을 선언하고 있다.

*띄어쓰기로 두 단어 이상 연결된 경우 해당 속성값이 일치한다면 적용한다.
다른 단어와 붙어있거나, 하이픈으로 연결되어 있으면 적용 되지 않는다.

[속성|="속성값"] 선택자

상위요소[속성|="속성값"] {
						속성: 속성값;}

특정 속성을 가진 모든 요소들 중, 해당 속성값을 가지거나 하이픈으로 연결된 속성값을 가지는 요소를 선택하여 스타일을 적용한다.

<style>
	h1[tittle|="welcome"] {
							color: red;}
</style>


<body>
	<div>
        <h1 title="welcome">welcome</h1>     <!--스타일 적용-->
        <h1 title="welcome-to-my-home">welcome to my home</h1>   <!--스타일 적용-->
        <h1 title="welcome to my room">welcome to my room</h1>
        <h1 title="welcometokorea">welcome to korea</h1>
    </div>
</body>

<!--h1 태그의 title 속성을 가진 여러 요소들 중 속성값 welcome 을 가지는 요소를 선택하여 스타일을 적용한다.-->

위 코드는 h1 태그의 여러 title 속성들 중, 속성값 welcome 를 가지는 요소를 선택하여 스타일을 부여할 것을 선언하고 있다.

하이픈으로 연결 된 경우 해당 속성값이 일치한다면 적용한다.
다른 단어와 붙어있거나, 띄어쓰기로 연결되어 있으면 적용 되지 않는다.

[속성이름^="속성값"] 선택자

상위요소[속성이름$="속성값"] {
						속성: 속성값;}

특정 속성을 가진 모든 요소들 중, 해당 속성값으로 시작하는 요소를 선택하여 스타일을 적용한다.

<style>
	a[title^="abc"] {
					background-color: #eee;}
</style>


<body>
	<div>
       <a href="#" title="abc">link</a>         <!--스타일 적용-->
       <a href="#2" title="abc def">link</a>    <!--스타일 적용-->
       <a href="#3" title="abc-def">link</a>    <!--스타일 적용-->
       <a href="#4" title="abcdef">link</a>   
    </div>
</body>

<!--a 태그의 title 속성을 가진 여러 요소들 중 속성값 abc 로 시작하는 요소를 선택하여 스타일을 적용한다.-->

위 코드는 a 태그의 여러 title 속성들 중, 속성값 abc 로 시작하는 요소를 선택하여 스타일을 부여할 것을 선언하고 있다.

하이픈으로 연결 된 경우, 띄어쓰기로 연결되어 있는 경우 모두 해당 속성값이 일치한다면 적용한다.
다른 단어와 붙어있는 경우에는 적용되지 않는다.

[속성이름$="속성값"] 선택자

상위요소[속성이름$=속성값] {
						속성: 속성값;}

특정 속성을 가진 모든 요소들 중, 해당 속성값으로 끝나는 요소를 선택하여 스타일을 적용한다.

<style>
	a[title^="def"] {
					background-color: #eee;}
</style>


<body>
	<div>
       <a href="#" title="def">link</a>         <!--스타일 적용-->
       <a href="#2" title="abc def">link</a>    <!--스타일 적용-->
       <a href="#3" title="abc-def">link</a>    <!--스타일 적용-->
       <a href="#4" title="abcdef">link</a> 
    </div>
</body>
       
<!--a 태그의 title 속성을 가진 여러 요소들 중 속성값 def 로 끝나는 요소를 선택하여 스타일을 적용한다.-->

위 코드는 a 태그의 여러 title 속성들 중, 속성값 def 로 끝나는 요소를 선택하여 스타일을 부여할 것을 선언하고 있다.

하이픈으로 연결 된 경우, 띄어쓰기로 연결되어 있는 경우 모두 해당 속성값이 일치한다면 적용한다.
다른 단어와 붙어있는 경우에는 적용되지 않는다.

[속성이름*="속성값"] 선택자

상위요소[속성이름*="속성값"] {
						속성: 속성값;}

특정 속성을 가진 모든 요소들 중, 해당 속성값이 포함된 모든 요소를 선택하여 스타일을 적용한다.

<style>
	a[title^="wow"] {
					background-color: red;}
</style>


<body>
	<div>
       <a href="#" title="wow">link</a>          <!--스타일 적용-->
       <a href="#2" title="wow good">link</a>    <!--스타일 적용-->
       <a href="#3" title="wow-good">link</a>    <!--스타일 적용-->
       <a href="#4" title="wowgood">link</a>     <!--스타일 적용-->
    </div>
</body>
       
<!--a 태그의 title 속성을 가진 여러 요소들 중 속성값 wow 를 가지는 요소를 모두 선택하여 스타일을 적용한다.-->

위 코드는 a 태그의 여러 title 속성들 중, 속성값 wow 를 가지는 요소를 모두 선택하여 스타일을 부여할 것을 선언하고 있다.

하이픈으로 연결 된 경우, 다른 단어와 붙어있는 경우, 띄어쓰기로 연결되어 있는 경우 모두 해당 속성값이 일치한다면 적용한다.