선택자

🐥 선택자 type

🎃 tag selector

<p>

🎃 class selector

<p class="nav">

🎃 id selector

<p id="nav">

🐥 부모(조상) 자식(자손) 선택자

🎃 조상-자손 선택자 ➡ 띄어쓰기

ul li {
    color:red;
}

🎃 부모-자식 선택자(직계) ➡ 좌괄호(>)

ul > li {
    color:red;
}

🎃 동등 선택자(여러개 선택할 때) ➡ 콤마(,)

ul , ol { 
    color:red;
}

🎃 인접 선택자 ➡ 플러스(+)

ul + p {
    color:red;
}
/* 
앞의 요소 바로 뒤에 있는 요소만 선택. 
❗ 위 코드에서 각 ul 뒤에 오는 첫 번째 단락의 텍스트만 빨간색이 된다. 
*/

🎃 링크(<a>)가 걸린 이미지 선택자

a[href $ = ".jpg"]{
    color:red;
}
/* 
jpg로 끝나는 이미지로 링크가 걸린 앵커 전체 찾기
(gif와 png는 각각 .gif, .png로 바꿔줘야 한다) 
*/

🎃 체크(checked)되는 요소만 선택하는 선택자 ➡ :checked

input[type=radio]:checked{
    color:red;
}
/* 
radio button이나 checkbox처럼 체크되는 사용자 인터페이스 요소만을 대상으로 함
*/

🎃 제외하고 싶은 부분 선택하는 선택자 ➡ (적용하려는 부분):not(제외하려는 부분)

div:not(#container){
    color:red;
}
*:not(p) {
  color: green;
}
/* 
- div에 red를 입히나 #container부분만 제외한다
- 전체(*)에 green을 입히나 <p>부분만 제외한다
*/

🎃 특정 요소 지목하는 선택자 ➡ :nth-child(n)

li:nth-child(3){
    color:red;
}
:nth-child(4n) {
  color: lime;  /* 임의 그룹에서 4번째 위치하는 요소 모두선택 */
/* 
- nth-child(n)에서 n은 정수를 받는다(1부터 시작) -> (1)은 첫번째, (2)는 두번째

- 자식요소의 변수 집합을 선택할 때도 활용(li의 3번째만 골라서 적용할때)

-odd (형제 요소에서 홀수번째(1, 3, 5, ...)인 요소를 나타냄)
  ex. :nth-child(odd)  또는 :nth-child(2n+1)

-even (형제 요소에서 짝수번째(2, 4, 6, ...)인 요소를 나타냄)
  ex. :nth-child(even)  또는 :nth-child(2n)

-<An+B>  -> 함수형 표기법(사용자 지정 패턴을 만족한 인덱스를 가지는 요소를 나타내며, 목록의 An+B번째 요소라고 해석할 수 있다.
   An+B의 형태로 나타내며,
   A는 정수 인덱스 증감량,
   B는 정수 오프셋,
   n은 0부터 시작하는 모든 양의 정수를 나타낸다.
*/

🐣 부모(조상)-자식(자손) 선택자 간에는 '상속'이 이루어진다.
1) 특정 선택자에 직접 속성값을 주면, 부모로부터 상속된 값은 무시된다(즉, 속성값을 따로 주지 않은 경우에만 상속된 값이 적용)

/*  html에 color:red를 준 뒤(html은 최상위 태그이므로 전체 적용),  */
* {
  color:red
}

/*   ul/li에 color:blue를 주면 해당 내용(ul/li)은 blue로 바뀐다  */
ul li {
  color:blue
}

2) 부모-자식 / 조상-자손 간의 상속범위는 다르다

html

<ul id="test">
   <li>first</li>
   <ul>
      <li>second</li>
      <li>third</li>
         <ul>
            <li>forth</li>
         </ul>
    </ul>
 <ul>

css

   #test > li {
   	color:red;
   }
   /* first, second, third만 red로 변함(직계자식만 해당) */

    #test li {
   	color:red;
   }
   /* 전체가 red로 변함(li에 적용된 속성값이 그 하위 태그까지 모두 적용) */

https://code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048

https://www.codingfactory.net/10781