7. CSS - 기타 선택자, 선택자 추가 작성법

기타 선택자

• :only-child - 특정 요소의 자식이 하나밖에 없을 때 선택

 

HTML 작성 화면
CSS 작성 화면
웹에서 출력된 화면

:only-cihild 작성 시 같은 태그의 자식이 2개 이상이면 CSS가 적용되지 않는다 

 

 

 

• :only-of-type - 특정 요소의 자식 중 지정된 형태와 같은 자식 요소가 하나만 있을 경우 선택

HTML 작성 화면
CSS 작성 화면
웹에서 출력된 화면

:only-of-type 작성 시 같은 자식이 2개 이상이면 CSS 적용이 안됨.

 

 

• :empty - 자식 노드가 없는 요소를 선택

HTML 작성 화면
CSS 작성 화면
웹에서 출력된 화면

 

자식 노드(Node)란 : 태그, 글자, 띄어쓰기 모두를 노드라고 함.

 

 

선택자 추가 작성법

• 여러 선택자 동시 작성
  • 같은 스타일을 적용하고 싶은 요소가 있느나 선택자가 일치하지 않을 경우 사용 
  • [작성법] : 선택자1, 선택자2, 선택자3, ... { CSS 코드;}

HTML 작성 화면
CSS 작성 화면
웹에서 출력된 화면

 

 

• 특정 요소 내부에 있는 특정 클래스만 선택

HTML 작성 화면
CSS 작성 화면
웹에서 출력된 화면

 

 

• 클래스가 여러 개인 요소 선택하는 방법
  • 클래스가 여러 개인 요소를 선택 시 클래스 선택자를 띄어쓰기 없이 연달아 작성(순서 상관X)

HTML 작성 화면
CSS 작성 화면
웹에서 출력된 화면