[ CSS ] CSS 선택자 사용할 때 주의사항과 팁

하루입니다.

 

 

---

 

 

CSS 선택자 사용할 때는 띄어쓰기를 잘 하자.

 

선택자1 :선택자2

        선택자1의 하위 엘리먼트인 선택자2 중 첫번째 자식 엘리먼트를 찾는다.

 

선택자1:선택자2

        선택자1 중 첫번째 자식 엘리먼트를 찾는다.

 

 

 

 

w3school CSS selector 캡처화면

 

 

 

 

번역

 

 

---

 

 

선택자 작성 팁

1. 특정 엘리먼트 하나를 선택해야 할 때

document.querySelector("CSS선택자") : Element 객체가 반환된다.

    #아이디 선택자를 사용하자.

    :first-child, :last-child, :nth-child(n) 선택자를 사용하자.

    속성선택자를 사용하자(폼입력요소의 입력필드가 선택대상일 때)

 

2. 엘리먼트를 여러 개 선택해야 할 때

document.querySelectorAll('CSS선택자') : Element객체가 여러개 저장된 배열유사객체가 반환된다.

    태그 선택자를 사용하자.(태그명이 같은 엘리먼트들이 선택대상일 때)

    .클래스 선택자를 사용하자. (같은 스타일이 적용된 엘리먼트들이 선택대상일 때)

    속성선택자를 사용하자. (주로 폼입력요소중에 이름이 같은 엘리먼트들이 선택대상일 때, 같은 속성을 가지며 속성값이 일치하는 엘리먼트들이 선택대상일 때)

    의사클래스 선택자를 사용하자. (같은 상태를 가지는 엘리먼트들이 선택대상일 때)

 

 

---

 

 

 

잘못된 정보에 대한 지적은 언제나 환영입니다. 

 

복습 끝!