CSS의 선택자

오태원·2024년 11월 1일

CSS 작성법

선택자(selector){속성(property):속성값(property-value);}
= 선택자의 프로퍼티를 값으로 변경하겠다. 라는 뜻이다.

선택자에는 tag들이 오면 되고,
속성에는 padding, color, width, height등,,HTML의요소를 선택하고, {}내에 값을 지정 하여 style을 정의 할 수 있다.
속성과 속성의 값을 적으면';'세미콜론으로 닫아주어 끝을 구분하고, 여러개의 속성을 연속해서지정해 줄 수있다.

기본 선택자

별도의 테크닉 없이 단순하게 무언가를 고를 때 기본적인 선택자이다.

전체텍스트 선택자: '*'를 적어주면 모든 요소를 선택해주는 전체 선택자를 쓸 수있다.
태그 선택자: 태그 선택자는 말 그대로, 태그를 적어주고 {}안에 속성값을 입혀주면 된다. ex) li, p, h, div,,등
class선택자: 태그 안에 class속성의 값을 선택해준다. 기호는 '.'온점을 사용하여 '.'뒤에 class의 값을 적어주고 {}안에 속성값을 입혀주면 된다.
ex) <li class="circle" ~ ///// .circle{속성값}
id 선택자: class선택자와 비슷하게 태그안에 id 속성값을 선택해준다. 기호는 '#'을 사용하고 '#'뒤에 id값을 적어주고 {}안에 속성값을 입혀주면 된다.
ex) <li id="square" ~ ///// #square{속성값}

복합 선택자

특수한 요소를 호출 하고싶을 때, 기본 선택자만으로는 호출이 불가능 할 때 사용한다.

일치 선택자:
선택자와 뒤에 호출하는 속성의 값이 둘 다 동시에 만족을 해야할 때 사용한다.
기호로는 "선택자.혹은#속성값"
- ex) <div class="phone" ~///// div.phone{속성값} 속성이 class가 아니고 id였다면 #을 넣어주면됨.
자식 선택자:
선택자의 자식요소를 선택 할 때 사용.
기호로는 "선택자 > .속성값"
- ex)
  위 사진과 같이 되면 ultag 안에 속하는 1번 pink class만 선택이 되는 것이다.
  2번과 3번은 ultag의 자식 요소가 아니므로 제외되었다.
- 이것 또한 class속성이 아니고 id속성이라면 #속성값을 적어주면 된다.
후손 선택자:
선택자의 후손요소를 선택 할 때 사용.
기호로는 "선택자 .속성값"
- ex)
  위 사진에서는 div의 후손요소인 1번과 2번의 pink만 선택이 되고, 3번의 pink는 div의 후손 요소가 아니므로 제외 되었다.
- 이것 또한 속성값이 class가 아니고 id 였다면 .(온점)이 아닌 #을 적어주면 된다.
인접 형제 선택자:
선택자의 형제요소 중 다음 요소 하나를 선택한다.
기호로는 ".속성값 + 형제 태그"
- ex)
  언급된 class의 pink속성 바로 아래 형제관계인 '초록'이 언급 되었다.
- 이것 또한 속성값이 class가 아니고 id 였다면 .(온점)이 아닌 #을 적어주면 된다.
일반 형제 선택자:
선택자의 다음 아래 형제요소 모두를 선택한다.
기호로는 ".속성값 ~ 형제태그"
- ex)
  언급된 class의 pink속성 아래 형제관계들인 '초록' 과 '노랑'이 언급 되었다.
- 이것 또한 속성값이 class가 아니고 id 였다면 .(온점)이 아닌 #을 적어주면 된다.

가상클래스 선택자

사용자의 행동에 따라 변화하는 가상 상황에 따라서 요소 선택시 사용. ex): Hover, Active, Focus,,
각 요소의 상황에 따라 사용자가 원하는 요소를 선택할 때 사용. ex): first-child, last-child, nth-child,,
특정 요소를 부정 할 때 사용 ex): not

hover, active, focus

ABC:hover = 마우스 커서가 올라가 있는 동안 선택.
기호로는 "a:hover{ }"
ABC:active = 마우스를 클릭하고 있는 동안 선택.
기호로는 "a:active{ }"
ABC:focus = 선택자가 포커스되면 선택.
기호로는 "input:focus{ }"

~ child (형제 요소)

ABC:first-child
- 선택자가 형제 요소 중 첫째라면 선택.
ABC:last-child
- 선택자가 형제 요소 중 막내라면 선택.
ABC:nth-child(n)
- 선택자가 형제 요소 중 (n)째라면 선택.
ABC:nth-child(짝수) // n은 0부터 시작 //
- 선택자가 형제 요소 중 (짝수)라면 선택.
ABC:not(XYZ)
- 선택자가 아닌 요소 선택.

가상 요소 선택자

선택 된 요소의 앞, 뒤에 별도의 content를 삽입하는 선택자.
반드시 content라는 속성을 사용.
빈 값("")이라도 넣어 주어야 적용 됨.
종류
- after:요소의 내부 뒤에 내용(content) 삽입.
  - 기호로는 ABC::before
- before: 요소의 내부 앞에 내용(content)에 삽입.
  - 기호로는 ABC::after
실제로 의미 없는 HTML 태그를 만들지 않고, 요소 삽입이 가능하여 자주 사용함.
ex) 쇼핑몰 페이지 메뉴에 Hot, 추천 등을 넣기 위해 별도의 태그를 삽입 하는 것이 아니라 가상 요소 선택자를 활용함여 처리하면 편리함.