2021-05-26 (44일차) CSS Diner 헷갈렸던 개념 정리하기

154강 - DSS Diner

 

- A + B

: 인접 형제 선택
ex) div + a => div를 직접 따르는 a (div동생의 a)

 

- a ~ b

: 앞의 태그를 따르는 모든 형제들 선택

ex) div ~ a => div의 뒤에 위치한 모든 a형제

ex) a ~ a => a의 뒤에 위치한 모든  a형제

a+b  와  a~b

- only-child

: 유일한 하위 자식 선택
: 다른 요소의 내부에 있는 유일한 요소를 선택할 수 있음
span:only-child는 다른 요소의 유일한 자식인 span 요소를 선택합니다.
ex) ul li:only-child => ul 안에 있는 유일한 li 선택

ex) section > p:only-child => section 안에 있는 유일한 태그 p 선택

ex) div:only-child => div 안에 있는 유일한 태그 선택

 

ㄴ> { div > section:only-child,  section:only-child,  div : only-child } 셋 중 어느 태그를 선택하던 같은 결과

 

 < for >

- *[for]

  : for이란 속성을 가진 모든 것 ( *는 생략 가능)

 

- [for="hello]

  : for속성값 "hello"를 가진 것

  ㄴ [href="#"]와 똑같은 양식

 

- div[for]

  : div이면서 for속성을 가진 것

 

- [for^="he"]

  : for속성값 "he"로 시작하는 것

 

- [for*="el"]

  : for속성값 "el"를 포함하는 것

 

- [for$="llo"]

  : for속성값 "llo"로 끝나는 것