[TIL] CSS Selector👿

1. 복합선택자😱

기본적으로 여래개의 선택자를 선택하는 방법이 있고, 이는 ,로 각 선택자들을 구분한다.

  h1, h2, h3, h4, h5, h6 {color: red;}

<ul>
  <li class="apple">       <!-- 자식이자 자손 -->
    <div>                  <!-- 자손 -->
      <p></p>              <!-- 자손 -->
    </div>
  </li>            
  <li class="grape"></li>  <!-- 자식이자 자손 -->
  <li class="banana"></li> <!-- 자식이자 자손 -->
</ul>			   <!-- 각 li들끼리는 형제!! -->

직관적인 이해를 위해 예시를 들어보았다.
ul의 자식은 li 3개이다. ul의 자손은 li를 포함한 li, div, p이렇게 된다.

1.1 자손 선택자

ul li {color:red;}

자손을 선택하려면 공백을 사용해서 선택한다.
li, div, p의 글자색이 레드로 바뀐다.

1.2 자식 선택자

ul > li {color:red;}

자식을 선택하려면 >를 사용해준다.
위의 경우는 div p를 제외한 li만 선택된다. (자식과 자손을 헷갈리지 말자)

1.3 인접 형제 선택자

.apple + li {color:red;}

말 그대로 인접한 형제를 선택하는 것이다. 위의 예제에서는 애플과 가장 인접한 li인 그레이프가 선택된다.
(단일선택임을 잊지 말자!!)

1.4 일반 형제 선택자

ul ~ li {color: red;}

단일 선택이 있으면 일반적으로 모든 형제를 선택하는 것도 있을 것이다. 이는 ~로 선택할 수 있다. ~ 앞에 나와있는 요소 이후에 나오는 모든 뒤요소들을 말한다. 이해가 어려웠는데, 요 예제로 말하면

"ul 뒤에나오는 같은 부모를 가지는 li를 선택하겠습니다"

라는 뜻이 된다. 가끔은 코드가 이해가 빠를때도, 코드가 구현된 화면을 보는게 빠를때도 있는것 같다.
(형제요소란 같은 부모를 가지는 애들을 말한다)

2. 속성선택자👿

말 그대로 HTML태그 중 attribute값을 가지는 애들을 고르겠다는 얘기가 된다. 가장 쉽게 떠올릴 수 있는 태그는 a태그이다(반드시 넘어가는 페이지의 주소가 있기 때문에!!href)
총 6종류가 있는데, 암기가 아닌 '이해'를 목적으로 한다. (어차피 모를 때 여기로 보러 올거다...)

2.1 tag[attribute]

a[href] {color:red;}

의미를 풀어보자면, a태그이면서 href라는 속성을 가진태그를 선택한다. (이 예제에 한해서는 아마 세상 모든 a태그가 선택 될 것이다.)

2.2 tag[attribute='var']

a[href="apple.bo.qw"]

속성 값이 반드시 일치해야 하는 선택자이다. apple.bo.qw에서 한 글자라도 틀리면 선택되지 않는다.

2.3 tag[attribute~='var']

a[href~="apple.bo.qw"]

속성에 단어가 포함 되어야한다. 여기서 단어포함이란, 속성=aabbcc라는 태그가 있는데 태그~='bb'를 찾으면 선택이 안된다. aabbcc라는 단어가 통으로 들어가야 한다. 단어와 단어의 구분은 띄어쓰기로 된다. 만약 aa bb cc였다면 선택이 되었을 것이다.

2.4 tag[attribute^='var']

a[href^="appl"]

캐럿으로 찾는 것은 시작 값이다. 이것은 단어의 개념이 아니라 시작하는 문자열로 생각해야 한다. 이해가 쉽게 일부러 appl까지만 적었는데, 이래도 선택이 된다는 의미이다.

2.5 tag[attribute$='var']

a[href$="qw"]

달러사인은 끝나는 값을 의미한다. 위의 캐럿과 유사하다. 이것 역시 단어가 아닌 문자열의 개념이다.

2.6 tag[attribute*='var']

a[href*="pple"]

에스터리스크가 의미하는 것은 포함 문자열이다. 단순히 띄어쓰기나 구분없이 pple라는 문자열만 있다면 선택하는 것이다.

이 파트에서 유념할 것은 단어와 문자열의 차이를 이해하는 것이다!!!

3. Pseudo selector👿👿👿

pseudo : 가상의

Pseudo 선택자에서 알아야 할 것은 두 가지이다. :로 선택하는 pseudo-class-selector 와 ::로 선택하는 pseudo-elements-selector가 있다.

<!-- div에 마우스를 올리면 글자색을 red로 -->
div:hover {color:red;}`
<!-- div의 마지막 자식으로 |를 추가하겠다 -->
div::after {content:"|"}`

class vs elements (: vs ::)

가상클래스 선택자와 가상요소 선택자는 꽤나 많이 쓰이는데 그 쓰임새를 기억해두면 편하다.

가상클래스 선택자는 특정한 상태에 스타일을 입힐 때
가상요소 선택자는 특정한 부분에 스타일을 입힐 때 사용된다.

물론 특정한 상태라는 것은 기억하기에 편한 방법이고, 엄밀히 말하면 가상의 클래스 즉, 있지도 않은 클래스를 있다고 여기는 것이다.

3.1 pseudo-class-selector

가상 클래스란, html상에는 있지도 않은 가상의 클래스를 생성하는 것이다.

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

가상클래스 선택자는 특별한 상황 뿐만 아니라 원하는 순번의 요소를 선택할 때도 쓰인다.

li:first-child
li:last-child
li:nth-child(n)
li:nth-child(2n+1)
li:nth-child(2n)

순서대로

첫번째 li 선택(1)
마지막 li 선택(6)
n번째 li 선택(if, n=2 → 2)
홀수번째 li 선택(1,3,5)
짝수번째 li 선택(2,4,6)

만약 이것을 html에서 마크업할때 클래스를 부여해준다면, 마크업도 어지러워지고 불필요한 클래스 생성을 하게되므로 css에서 처리해준다.

3.2 pseudo-elements-selector

있지도 않은 요소를 있는 것처럼 생성을 해주는 것이다.

<!-- html -->
<div>가상요소</div>

/* CSS */
div::after {content: "|";}
div::before {content: "|";}

이렇게 스타일을 입혀주면 전후에 |라는 콘텐추가 추가된다.

|가상요소
가상요소|

어떠한 의미냐면, 선택자::after의 경우 선택자의 마지막 자식으로 html에는 존재하지 않는 가상의 요소를 만드는 것이다. (::before는 마지막이 아닌 첫번째자식)

✅ 끝으로

선택자를 들어가면서 조금씩 머리가 아파오기 시작한다. 나는 html과 css를 인터넷에서 강의로 미리 듣고나서 수업을 듣고있다. 오늘 강의중에 머릿속에 남은 말이 하나있다.

"이전에 미리 강의를 들어 이해해서 알고있는 것과 직접 해보는 것은 별개의 일입니다"

동료들의 시멘틱 마크업을 보면서, 동료들의 CSS 실습을 보면서 크게 느끼는 부분이 많다. 지금 하고있는 것에 집중을 해야하고, 손으로 하는 '훈련 또 훈련'을 명심한다🤣(그렇다고 해서 모자란 3%를 채우기 위해 다음 단계의 97%를 향해가는 것을 포기해선 안된다!!! 이것 역시 강사님의 명언...) 그리고 너무 공부를 위한 기록이 아닌 기록을 위한 공부를 하는 느낌이 든다. 타개책이 필요할 것 같은데, 수업듣고 밥먹고 복습 및 기록을 하면 정신없이 한밤중이다...(복습방법이나 기록방법에 문제가 있는걸까...?)
공부는 하기 싫은데 놀 수가 없으니 엔티티코드 표 보면서 소리내어 읽는 중인데 재.밌.다.

앰퍼센드,,캐럿,,에스터리스크,,앳사인,,

> 참고 사이트

• https://www.freeformatter.com/html-entities.html
• https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements
• https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-class