CSS - 선택자

CSS = cascading style sheet

선택자 (Selectors)

• * : universal "select ALL"
• Tag : type "select TAG"
• #id : id "select ID"
• .class : class
• : : state
• [] : attribute

구체적으로 태그에 가까이 설정한 것이 우선순위가 높다.

우선순위는 아래와 같다.

1. 속성 값 뒤에 !important 를 붙인 속성
2. 인라인 스타일(html 파일에서 스타일 직접 지정)로 적용되어 있는 속성
3. 선택자에 #id가 쓰인 속성
4. .class, :attribute, pseudo-class(추상클래스)로 지정한 속성
5. 태그 이름 으로 지정한 속성
6. 부모 요소에 의해 상속된 속성

:hover 마우스를 위에 올렸을 때.

예시

button:hover {
	color: red;
}

예시

a[href] {
	color: purple;
}

a[href="naver"] {
	color: purple;
}

a[href^="naver"] {
	color: purple;
}

1번 href 속성값이 지정된 a태그를 지정
2번 href 속성값에 naver가 포함된 a태그를 지정
3번 href 속성값이 naver로 시작하는 a태그를 지정

---

padding은 컨텐츠 내부
margin은 컨텐츠 외부

---

다양한 선택자

selector 연습용 미니게임 - https://flukeout.github.io/

다른 요소 바로 뒤에 오는 요소 선택 A + B

A요소 뒤에 오는 모든 B요소를 선택한다!
서로 뒤따르는 요소를 형제라고 한다.

Examples

p + .intro selects every element with class="intro" that directly follows a p
div + a selects every a element that directly follows a div

요소 다음에 오는 모든 요소 선택 A ~ B

뒤에 오는 요소의 모든 형제를 선택할 수 있다.
인접 형제 선택자(A + B)와 비슷하지만 하나가 아닌 다음 요소를 모두 가져온다.

Examples
A ~ B selects all B that follow a A

요소의 직계 자식 선택 A > B

다른 요소의 직계 자식인 요소를 선택할 수 있다.
자식 요소는 다른 요소에 직접 중첩된 요소이다.

Examples
A > B selects all B that are a direct children A

요소의 첫번째 자식 선택자 :first-child

Examples
:first-child selects all first child elements.
p:first-child selects all first child p elements.
div p:first-child selects all first child p elements that are in a div.

요소 내부의 유일한 요소인 요소를 선택 :only-child

Examples
span:only-child selects the span elements that are the only child of some other element.
ul li:only-child selects the only li element that are in a ul.

끝에서 A번째 요소 선택자:nth-last-child(A)

Examples
:nth-last-child(2) selects all second-to-last child elements.

요소 내에서 해당 유형의 첫 번째 요소를 선택 :first-of-type

Examples
span:first-of-type selects the first span in any element.

N번째 유형 선택기 :nth-of-type(A)

Examples
div:nth-of-type(2) selects the second instance of a div.
.example:nth-of-type(odd) selects all odd instances of a the example class.

특정 문자로 시작하는 속성 값을 가진 모든 요소 선택 [attribute^="value"]

특정 문자로 끝나는 속성 값을 가진 모든 요소 선택 [attribute$="value"]

특정 문자가 포함된 속성 값이 있는 모든 요소 선택 [attribute*="value"]