선택자 (Selector)

CSS의 선택자 ( Selector)

선택자의 종류

Type Selector : 태그의 요소 이름 선택자

<style>
h2 {
	color : red;
}
</style>

• 선택된 요소가 전체 문서의 해당 요소에 적용됨, 특정 요소 선택 x
• 범용 스타일을 적용할 때 주로 상단에 작성

Id Selector : HTML 태그의 id(고유식별자) 선택자

<style>
#hi {
	color:red;
}
</style>

<h2 id="hi">안녕하세요.<h2>

• 단일 고유값 선택 시 사용

Class Selector : HTML 태그에 Class(중복 가능) 선택자

<style>
.hi {
	color:red;
}
</style>

<h2 class="hi hello">안녕하세요.<h2>
<h3 class="hi">반갑습니다.<h3>

• 중복 적용 가능, class 사이 공백으로 다중 적용 가능

Attribute Selector : 속성 선택자

<style>
	a[target] {
    	color:red;
    }
    a[href="www.b.com"] {
    	color:blue;
    }
</style>
<li>
	<a href="www.a.com" target="_blank"></a>
    <a href="www.b.com"></a>
</li>

• 속성 값을 태그명[attr=""]를 사용해 구체적인 선택 가능
• [href^="http"] : ^= 해당 value로 시작하는 속성 선택
• [href$="http"] : $= 해당 value로 끝나는 속성 선택
• [href*="http"] : *= 해당 value를 포함하는 속성 선택

Pseudo-Class Selector : 가상 클래스 선택자

selector:xxx-child

<style>
li:first-child {
	color:red;
}
li:last-child {
	color:blue;
}
li:nth-child(2) {
	color:green;
}
</style>

• selector:first-child -> 첫번째 자식! 요소 선택
• selector:last-child -> 마지막 자식! 요소 선택
• selector:nth-child(2n -1) -> 해당 인덱스 자식! 요소 선택

selector:xxx-of-type

<style>
p:first-of-type {
	color:red;
}
p:last-of-type {
	color:blue;
}
p:nth-of-type(2) {
	color:green;
}
</style>

• selector:first-of-type -> selector의 각각의! 형제 요소 중 첫번째 선택
• selector:last-of-type -> selector의 각각의! 형제 요소 중 마지막 선택
• selector:nth-of-type(3) -> selector의 각각의! 형제 요소 중 해당 인덱스 선택

selector:not()

<style>
selector:not(selector) {
	color:red;
}
</style>

• not(selector) -> 괄호 내부 선택자를 제외한 나머지에 적용
• 속성 선택자도 () 내부에 사용 가능 ex) input:not([type="submit"])

link, visited

<style>
	a:link {
    	color:red;
    }
    a:visited {
    	color:red;
    }
}
</style>
<a href="www.ex.com">Ex</a>

• 방문 유무 상태에 따라 스타일링을 따로 설정하게 해줌

hover, active, focus

<style>
	input[type="button"]:hover {
    	color:skyblue;
    }
</style>
<input type="button" value="click">

• hover -> 마우스를 올렸을 때
• active -> 클릭하고 있을 때
• focus -> 요소가 포커싱이 되었을 때

enabled, disabled, checked

<style>
	input[type="button"]:hover {
    	color:skyblue;
    }
</style>
<input type="text1" placeholder="1">

• enabled -> 활성화 되어있는 요소들에 적용
• disabled -> 비활성화 되어있는 요소들에 적용
• checked -> 체크가 된 요소에만 적용

Pseudo-Element Selector : 가상 요소 선택자

• 가상 요소를 만들어 선택함, 꾸밈을 위한 스타일 요소로 인식
• selector:: 콜론 2개 사용 원장

before, after

<style>
	.movie::before {
    	content: 'movie';
        color: red;
    }
</style>
<div class="movie">주토피아</div>

• before, after 에 컨텐츠 속성을 추가하여 앞 뒤에 가상 요소 추가 가능

first-letter, first-line, selection

<style>
	.hi::first-letter {
    	color:red;
    }
</style>
<p class="hi">안녕하세요</p>
<p class="hi">반갑습니다</p>
<p class="hi">환영합니다</p>

• first-letter -> 첫번째 글자에만 스타일링
• first-line -> 첫번째 라인에만 스타일링 ( 브라우저의 가로폭 사이즈 )
• selection -> 선택 영역에 대한 스타일링 ( 드래그 영역 )

선택자 결합

하위 선택자

<style>
	ul li{
    	color:red;
    }
</style>
<ul>
  <li>리스트1</li>
  <li>리스트2</li>
  <li>리스트3</li>
  <li>리스트4</li>
</ul>

• 공백 " "을 사용해 구분, 공백 앞 태그의 하위 요소를 선택

자식 선택자

<style>
	ul > li{
    	color:red;
    }
</style>
<ul>
  <li>리스트1</li>
  <li>리스트2</li>
  <li>리스트3</li>
  <li>리스트4</li>
</ul>

• 부모 > 자식 선택자를 통해 바로 하위에 있는 요소 선택

일반 형제 선택자

<style>
	code ~ p {
    	color:red;
    }
</style>
<h1>제목</h1>
<div>
	<p>Span</p>
    <code>Code</code>
    <p>P2</p>
</div>

• 앞쪽 ~ 뒷쪽 -> 코드 상 뒤에 있는 요소만 선택 가능

인접 형제 선택자

<style>
	code + p {
    	color:red;
    }
</style>
<h1>제목</h1>
<div>
	<p>Span</p>
    <code>Code</code>
    <p>P2</p>
</div>

• 앞쪽 + 뒤쪽 -> 바로 인접한 요소만 선택 가능

그룹화

<style>
	code, p {
    	color:red;
    }
</style>
<h1>제목</h1>
<div>
	<p>Span</p>
    <code>Code</code>
    <p>P2</p>
</div>

• ,를 사용해 여러가지 요소를 한번에 선택 가능

범용 선택자

<style>
	* {
     color:red;
    }
</style>

• *으로 모든 요소 선택 가능

상속 제어하기

initial

<style>
	.parant {
    	color:red;
    }
    .child2 {
    	all:initial;
    }
</style>
<div class="parent">
	<div class="child1">자식1</div>
    <div class="child1">자식2</div>
</div>

• initial 값을 통해 상속을 끊어 낼 수 있다. ( all:initial -> 모든 스타일 무시 )

inherit

<style>
	.parant * {
    	color:blue;
    	color:inherit;
    }
    .child2 {
    	color:red;
    }
</style>
<div class="parent">
	<div class="child1">자식1</div>
    <div class="child1">자식2</div>
</div>

• 무조건 부모의 스타일을 따라가게 함 ( all:inherit -> 모든 스타일 상속 )

unset

<style>
	.parant {
    	color:blue;
    }
    .child2 {
    	all:unset;
    }
</style>
<div class="parent">
	<div class="child1">자식1</div>
    <div class="child1">자식2</div>
</div>

• 상속받을 값이 없을 때 : initial
• 상속받을 값이 있을 떄 : inherit

우선순위

스타일 적용 우선순위

• 1순위 : 선언된 곳
• 2순위 : 명시도 (적용범위가 적을수록 명시도가 높은 것!)
  !important > inline Style > ID > Class/Attribute/Pseudo Class > Type(tag) > * > inherited
• 3순위 : 코드 위치