[CSS]다양한 셀렉터들

범용성 있는 셀렉터로 <div>나 <span>과 같은 태그, class, id 등이 활용됨을 알게되었습니다. 그런데 그밖의 셀렉터가 또 있습니다. 가령, 특정 element에 포인터를 가져다 둘 때만 css 속성을 부여하고 싶을 때는 어떻게 해야 할까요? 모든 element를 통들어 동일한 css속성을 부여하고 싶을 때는 어떻게 해야 할까요?

1. CSS 전체 선택자 *

* {
  box-sizing: border-box;
}

*은 모든 css셀렉터를 의미하는 선택자입니다. 다양한 웹 브라우저 환경은 서로 다른 디폴트값을 가지고 있는데요, 그 서로다른 디폴트값을 우리가 원하는 대로 초기화 해주기 위해 자주 쓰입니다. 이를테면 <a>태그에 걸리는 못생긴 파란색 밑줄을 없애줄 때요.

2. Pseudo Class :

가끔 인터넷을 뒤적이다 보면, 마우스를 올렸을 때 배경 색이 변하는 카테고리나 버튼들을 보셨을 텐데요. 이렇듯 어떤 요소가 특별한 상태일 때만 활성화되는 속성도 있을 겁니다.

예를 들면 :hover가 있습니다. 마우스를 올려둔 특별한 상태일 때만 활성화 되는 속성을 지정할 때 쓰이는 셀렉터이지요.

<style>
  input:hover {
  color : red;
  cursor : pointer;
  }
</style>
<input type="button" value="여기에 마우스를 올려보세요!"/>

위와 같이 tag(혹은 아이디나 클래스도 상관 없어요) 옆에 콜론을 붙이고 상태값을 준 뒤, css속성을 부여하면 해당 상태일때만 활성화되는 속성을 줄 수 있습니다. 아래의 버튼처럼요!

3.Pseudo Element ::

<input>이라는 태그의 타입이 텍스트일 때, placeholder 라는 attribute가 있습니다. 이 인풋박스에 무엇이 들어와야 하는 지 힌트를 줄 때 주로 사용되는데요,

그런데 이 placeholder에도 background image나 font color등의 css 속성을 부여하고 싶을 때도 있을겁니다. placeholder 는 attribute인데 css의 selector에 어떻게 표현해 주어야 할까요.

input::placeholder {
  color: #bbb;
}

혹은

.class::placeholder {
  color: #bbb;
}

위와 같이 콜론 두개를 붙여서 selector를 만들어줄 수 있습니다. 이러한 형태를 슈도 엘리먼트(pseudo element), 가상 요소 라고 하는데요. 슈도 클래스와는 달리 element의 특정 부분에 스타일링을 줄 때 사용합니다.

<style>
  input::placeholder {
  color: red;
}
</style>
<input type="text" placeholder ="치킨은 양념이지!"/>

이것으로

에서의 "치킨은 양념이지"를 라는 placeholder를 정확히 지칭하는 선택자를 만들 수 있습니다.

4. 사실은 더 많은 셀렉터들이 있어요

html tree에서의 한 범위를 지정하기도, n번째 요소만 지정할 수도 있구요, 짝수번째 요소나 홀수번째 요소만을 지정하는 다양한 셀렉터들이 있답니다.
자세한 정보는
https://www.w3schools.com/cssref/css_selectors.asp
이곳을 살펴보면 알 수 있어요!

PS. 글을 출간하고 나니 input tag들의 value값이 모조리 날아가는 현상이 발생하네요. velog를 조금 더 잘 알게 되면 수정하겠습니다.