css Pseudo selectors

HTML,CSS

변기원 2021. 12. 20. 11:57

1. Pseudo Class

Pseudo selector는 영어단어와 잘 연상이 안되지만 의사클래스(선택자에 추가) 를 이용해서 선택한 요소가 특별한 상태일때 만족시키는?

한국말은 어렵고 쓰는 상황을 보면 이해가 된다.

의사 클래스 - CSS: Cascading Style Sheets | MDN

CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을

developer.mozilla.org

이런식으로 first-child라는 Pseudo class를 선택자에 추가해서 id나 class의 사용 없이 어떤 엘리먼트를 지정할 수 있다.

노마드코더님 인강에서는 nth-child라는 것도 이용해봤다.nth-child(2n)이라고 쓰면 짝수를 전부 선택할 수 있고

nth-child(3n+1)이라고하면 1부터 시작해서 4,7,10....으로 올라가는 모든 엘리먼트를 선택할 수 있다.

그다음은 combinator 결합자들

CSS 선택자 - CSS: Cascading Style Sheets | MDN

CSS 선택자는 CSS 규칙을 적용할 요소를 정의합니다.CSS 선택자는 CSS 규칙을 적용할 요소를 정의합니다.

developer.mozilla.org

얘네들도 비슷한데 Pseudo class가 좀 사용자의 사용상 맥락적인 상황에서 뭔가를 처리할때라면 combinator는 부모-자식의 관계를 아는 상황에서 id와 class를 사용하지 않고 css를 사용하는 그런 느낌이다.

결국 id와 class를 사용하지 않고 css를 쓴다는 것은 똑같다. id나 class를 쓰는 것보다 Pseudo selector를 쓰는게 좋은거라고 한다.

아직 실전을 해보진 못해서 잘 모르겠지만 암튼 그렇다고 한다!

예를 들어

p span{ background-color: blue;} -> p태그 밑에 모든 span에 적용(자식 말고 자식의 자식도 적용, 자식의자식의자식도 적용)

p > span{ background-color: blue;} -> p태그 바로 밑에 있는 span에만 적용(오직 자식만 적용)

p + span{ background-color: blue;} -> p태그의 바로 다음 밑에 오는 형제인 span에만 적용

p ~ span{ background-color: blue;} -> p태그의 형제인 span에 적용, 바로 다음에 오지 않아도 그냥 모든 형제관계에 적용

특성 선택자 - CSS: Cascading Style Sheets | MDN

CSS 특성 선택자는 주어진 특성의 존재 여부나 그 값에 따라 요소를 선택합니다.

developer.mozilla.org

태그의 attribute를 사용하는 방법인데 초심자인 내가 보기엔 이게 가장 유용할 것 같다..아니 쉬울것 같다.

이런식으로 사용하는건데, required인 input을 전부 선택할 수도 있고

attribute selector를 이용해서 type이 password인 input을 선택할 수도 있다.

그리고 placeholder~="name" 은 placeholder에 name이 들어가는 모든 것을 선택한다는 의미.

링크에 구문을 참고하면 ~= 과 비슷한 다양한 구문을 활용할 수 있다.