CSS_선택자

CSS 선택자

꾸밀 대상, 속성을 줄 대상을 의미

1. *: 전체 선택자

2. tag: 태그 선택자

3. .class: 클래스 선택자

4. #id: 아이디 선택자

5. 선택자:가상상황: 가상 선택자

📌 선택자에는 tag => class => id 순으로 우선순위 적용됨

그룹 선택자

원하는 선택자 여러개를 ,로 연결

.class1, .class2 {
	property: value
}

가상 클래스 선택자

실제로 html요소를 수정하지 않고 css만으로 가상 요소를 추가해 선택할 수 있다.

1. :first-child

   첫번째 자식요소 선택

2. :last-child

   마지막 자식요소 선택

3. :nth-child(n)

   n 번째 자식요소 선택 (괄호안에다가 원하는 숫자 입력)
   📍 2n 처럼 입력하면 2배수인 자식요소만 가져오기 가능

⛔️ 주의

<div class="container">
  <h1>제목입니다.</h1>
  <p>첫번째 p 입니다.</p>
  <p>두번째 p 입니다.</p>
  <span>첫번째 span 입니다.</span>
  <p>세번째 p 입니다.</P>
</div>

.container p:first-child{
	background-color: red;
}

--> 이 경우 첫번째 p 입니다에 css 적용 안됨.
왜냐면 container 자식요소에 h1이 첫번째로 들어가 있기 때문. <p> 태그이면서 첫번째 자식요소는 없으니까 어디에서도 css 적용 안됨.

📍(:first-of-type사용하면 됨)

4. :hover

   요소 위에 마우스가 올라갔을 때

5. :first-of-type

   형제 요소 중 첫번째 요소를 선택하는 가상 클래스

📍 :last-of-type, :nth-of-type(n)

6. :active

   활성화된 요소를 선택하는 가상 클래스 선택자

7. :focus

   focus를 받고 있는 입력창 등의 요소를 선택하는 가상 클래스 선택자

8. :visited

   사용자가 방문한 적 있는 링크를 선택하는 가상 클래스 선택자

가상 요소 선택자

실제로 html요소를 수정하지 않고 css만으로 가상 요소를 추가해 선택할 수 있다.

1. :after

.box1:after {
		content:"나는 가상 요소입니다.";
        display: block;
        background: blue;

}

⛔️ 주의
content속성을 빈 값이라도 꼭 넣어줘야함

2. :before

형제 요소 선택자

A와 같은 부모를 가지고 있는 형제 요소들 중 B를 선택한다.

A ~ B{

	property: value

}