선택자_복합

복합 선택자 

복합선택자 : 기본선택자 4개를 조합해서 사용한다. 

 

 

일치 선택자 (Basic Combinator)

일치 선택자: 기본 선택자 4개 중 2개를 이용하여 붙여서 사용

ex) tag name.class name or tag name id name (코드펜 예시 보면 이해됨)

• 선택자 2개를 동시에 만족시키는 요소를 선택 
• 태그 선택자 같은 경우 기호가 없기 때문에 구분할 수 없음으로 클래스(id)와 태그 선택자를 쓸 경우 브라우저가 인식을 못해서 사용 시 태그 우선 클래스는 후순위로 쓴다   
• 붙여쓰기가 일치 선택자 중요한 부분 

코드펜 예시 

 

- 같은 이름에 클래스가 있어도 선택자 li 태그 선택자도 만족시키는 요소를 선택해 style 변경이 되었다.

See the Pen 선택자_복합 by 김선미 (@tjsalsun) on CodePen.

 

자식 선택자(Child Selector)

자식 선택자: 선택자의 자식 요소 선택 

ex) tag name > class name 

• html에서 부모 자식 관계 생각하자 
• 꺽쇠 괄호는 자식 선택자의 중요한 기호이다 (  > )

 

코드펜 예시 

 

See the Pen 선택자_복합2 by 김선미 (@tjsalsun) on CodePen.

 

하위(후손) 선택자(Descendant)

하위(후손) 선택자(Descendant  Combnator) :  하위 요소 선택

• 띄어쓰기(공백)가 선택자의 기호이다 

 

코드펜 예시 

 

- div 태그 요소 안에 있는. orange라는 클래스 이름 하위요소 선택하면 해당 클래스 요소만 style 바뀜 

 

See the Pen 선택자_복합3 by 김선미 (@tjsalsun) on CodePen.

 

인접 형제 선택자 (Adjacent Sibling Combnator )

인접 형제 선택자:  선택자 다음 형제 요소 하나를 선택 

• 인접 형제 선택자 기호는 + (플러스)
• 다음 형제 중 하나이며 가장 인접한 형제를 선택 

 

코드펜 예시

 

- orange 클래스에 가장 인접한 형제 그다음 li 요소 하나만 선택해  글자 색상 변경 

 

See the Pen 선택자_복합4 by 김선미 (@tjsalsun) on CodePen.

 

일반 형제 선택자 (General Sibling Combinatro)

일반 형제 선택자 : 선택자 다음 형제 요소 모두를 선택

• 일반 형제 선택자 기호는 ~ (틸드)

 

코드펜 예시

-orange 클래스 다음 형제  li 요소들만 선택해  글자 색상 변경 

 

See the Pen 선택자_복합5 by 김선미 (@tjsalsun) on CodePen.

---

TIL

keypoint

각자 선택자 기호를 기억하자

 

느낀 점

 

스타일 줄 때 때에 맞게 사용할 수 있다는 걸 알았다 
잘 사용하면 나한테 이롭겠구나

 

 

오늘의 학습 만족도 

⭐⭐⭐⭐⭐