01_CSS 선택자

#20220426

선택자의 종류

예시! 아래 코드를 기준으로 설명 해 보겠다.

<div class="div">
	<p></p>
	<ol>
    	<li id="li_1"></li>
    	<li id="li_2"></li>
        <li id="li_3">></li>
    <ol>
</div>

1. 전체선택자
=> 위 코드 전체에 적용된다.

* { }

2. 태그선택자 (타입선택자)
태그명 { }

p { }
li { }

3. 클래스선택자
=> 중복, 재사용이 가능하다
.클래스명 { }

.div { }

4. 아이디선택자
=> 한개의 html문서 내에서 동일한 id는 중복사용이 불가능하다.
#아이디명 { }

#li_1 { }

5. 계층선택자

✔ 얘는 처음보는 선택자였다..! 이 친구는 계층선택자와 클래스선택자 사이정도의 순위가 적용된다.

위의 코드를 기준으로,
div가 제일 큰 상위태그이고
그 하위로 p태그와 ol태그,
ol태그 하위로 li태그가 세개 존재한다.

계층선택자에는 이렇게 네가지가 있다.

5-1. 자식 선택자 >
=> 말 그대로 하위의 태그를 의미!
div를 기준으로 p와 ol태그가 자식 선택자이다.

div>p
div>ol

5-2. 자손 선택자 블링크
=> 한 태그를 기준으로 하위태그의 하위태그를 의미!
div를 기준으로 li태그 세개가 자손 선택자 이다.

div li

5-3. 후행선택자 ~
=> 하위, 상위 태그가 아닌 동등한 태그들
li태그가 세개기 때문에 id로 값을 줬다.

id값이 #li_1을 기준으로 순서에 상관 없이 아래에 있는 #li_2, #li_3 태그들이 후행 선택자 이다! 형제 개념으로 생각하면 될 것 같다.

#li_1~#li_2
#li_1~#li_3

5-4. 근접후행선택자 +
=> 후행선택자와 비슷한 개념이나 바로 근접해있는 태그!

#li_1을 기준으로 #li_2가 근접후행 선택자이다.

#li-1+#li_2

+ nth:child(순위)
이거는 바로 예시로 들어보자면
li:nth-child(2) => 는 아이디가 li_2인 li태그를 의미한다..

이건 내가 보려고 정리한,,짱구가족으로 비유한 계층선택자

Ex 짱구가족 : 
신조상,
신용달 
신형만
신짱구 신짱아 신흰둥 
= 짱구를 기준으로 짱아는 후행이자 근접후행 흰둥이는 후행 

  1-1. 자식선택자 >
   신형만 > 신짱구 
   신용달 > 신형만 
        
   1-2. 자손 선택자 -> 띄어쓰기
    신용달 신짱구
    신조상 신짱구
    
   1-3. 후행선택자 -> ~
      신짱구 ~ 신흰둥 
      신짱구 ~ 신짱아 => 짱아는 후행이면서 근접후행선택자 */

   1-4. 근접후행선택자 -> + 
       신짱구 + 신흰둥 
       신짱아 + 신흰둥 
       

6. 그룹선택자
=>선택자들을 중복으로 묶어서 같은 스타일을 적용할 수 있다.
태그 , 태그 { }

p, li { }
#li_1, #li_2 { }

style 시트 내 코드는 위에서 아래로 흐르지만,

전체선택자 0 < 타입선택자 1 = 그룹선택자 1 < 계층선택자 3 < 클래스선택자 10 < 아이디선택자 100
순으로 가중치가 적용 된다 (우선순위)

!important > 인라인 > 내부 > 외부 > id > class > type > 전체

다 같을때 나중에 선언 > 먼저선언

반응선택자

1. hover : 마우스를 올려놓으면 스타일 적용

선택자:hover { }

 #h:hover {
  color : yellow;
  }

안녕 나는 hover야~ 마우스를 올려봐

2. active : 마우스로 클릭시 스타일 적용

선택자:active { }

 #a:active {
  color : pink;
  }

안녕 나는 active야~ 눌러봐

3. visited : 1번이상 방문한 링크에 대해서 적용

선택자:visited { }

 #v:visited {
  color : orange;
  }

안녕 나는 visited야~

4. link : 방문을 하지 않은 링크에다가 스타일 적용

선택자 : link { }

#l:link {
  color : skyblue;
  }

안녕 나는 link야~

5. not : ()내 선택자를 제외하고 스타일 적용

선택자 : not() {}

.h>p:not(#n2) {
color : deeppink;
} 

💨 div내에 not1, not2, not3 중에 not2에만 style을 미적용!!

// 엥,,? 왜css가 안먹지 .. 미리보기로는 먹히는데 ㅠ