[CSS] 선택자

• 자꾸 헷갈리는 자식 선택자 first-child 는 자식한테 거는거임…

  • ul 안의 첫번째 li 선택하려면 ul li:first-child

• attribute selector

  • 특정 attribute을 가지고 있는 element
  • data-mkt-id를 가지고 있는 button 이라면 button[data-mkt-id]
  • “example”을 포함하는 href를 가진 a 태그라면 a[href*="example"]
  • ~ 으로 끝나는 것 : $="~"
  • ~ 문자열을 한 번 이상 포함하는 것 : *="~"
  • ~ 포함하는 것(클래스처럼 공백으로 구분되는 attribute) : ~="~"

• general sibling combinator

  • 특정 선택자 뒤에 나오는 선택자 고르기!

  • img ~ p 선택자로 하면 3, 5번째줄 p가 선택된다!

    <p></p>
    <img />
    <p></p>
    <span></span>
    <p></p>

• adjacent sibling combinator

  • 특정 선택자 바로 뒤에 나오는 선택자 고르기!

  • img + p 선택자로 하면 3번째줄 p가 선택된다!

    <p></p>
    <img />
    <p></p>
    <span></span>
    <p></p>

• :enable

  • form 자식들 중 disabled 빼고 선택하려면 form>:enabled

    <form>
    <input />
    <input disabled />
    <input />
    <input />
    <button disabled></button>
    <button></button>
    </form>

• 출처: https://css-speedrun.netlify.app/