πŸ“… TIL #19

CSS-Selector

πŸ“… TIL pre-course HTML&CSS

πŸ‘‰ CSS Selector 정리

1.Selector 기초

  • 전체 μ…€λ ‰ν„°
    => *{…}

  • ID μ…€λ ‰ν„°
    => #name{…}

  • class μ…€λ ‰ν„°
    => .list{…}

  • 후손 μ…€λ ‰ν„°
    => header h1{…}

  • μžμ‹ μ…€λ ‰ν„°
    => header > p{…}

  • 인접 ν˜•μ œ μ…€λ ‰ν„°
    => section + p{…}

  • ν˜•μ œ μ…€λ ‰ν„°
    => section ~ p{…}



2.Selector ꡬ쑰 가상 클래슀

  • λΆ€λͺ¨μ•ˆμ— λͺ¨λ“  μš”μ†Œ 쀑 첫번째 μš”μ†Œ
    => λΆ€λͺ¨ μš”μ†Œ: first-child{…}

  • λΆ€λͺ¨μ•ˆμ— λͺ¨λ“  μš”μ†Œ 쀑 λ§ˆμ§€λ§‰ μš”μ†Œ
    => λΆ€λͺ¨ μš”μ†Œ: last-child{…}

  • λΆ€λͺ¨μ•ˆμ— λͺ¨λ“  μš”μ†Œ 쀑 N번째 μš”μ†Œ
    => λΆ€λͺ¨ μš”μ†Œ: nth-child(N){…}

  • λΆ€λͺ¨μ•ˆμ— λͺ¨λ“  μš”μ†Œ 쀑 ν™€μˆ˜λ²ˆμ§Έ μš”μ†Œ
    => λΆ€λͺ¨ μš”μ†Œ: nth-child(2n + 1){…}

  • λΆ€λͺ¨μ•ˆμ— λͺ¨λ“  μš”μ†Œ 쀑 3λ²ˆμ§ΈλΆ€ν„° 간격이 2μ”© 떨어진 μš”μ†Œ
    => λΆ€λͺ¨ μš”μ†Œ: nth-child(2n + 3){…}

  • λΆ€λͺ¨μ•ˆμ— AλΌλŠ” μš”μ†Œ 쀑 N번째 μš”μ†Œ
    => A: nth-of-type(N){…}

  • λΆ€λͺ¨μ•ˆμ— AλΌλŠ” μš”μ†Œ 쀑 첫번째 μš”μ†Œ
    => A:first-of-type{…}

  • A μ…€λ ‰ν„°μ˜ λͺ¨λ“  μš”μ†Œ
    => A:only-of-type{…}

  • λΆ€λͺ¨μ•ˆμ— AλΌλŠ” μš”μ†Œ 쀑 λ§ˆμ§€λ§‰ μš”μ†Œ
    => A:last-of-type{…}



3.λΆ€μ • Selector

  • divμžμ‹λ“€ 쀑에 2번째 μš”μ†Œλ§Œ μ œμ™Έν•˜κ³  λͺ¨λ“  μš”μ†Œ
    => div:not(:nth-of-type(2))

  • input 쀑에 tpye이 β€œpassword” 인 κ²ƒλ§Œ μ œμ™Έ
    => input:not([type=”password”])



4.attribute Selector

  • a μš”μ†Œ μ€‘μ—μ„œ href 속성을 κ°–λŠ” λͺ¨λ“  μš”μ†Œ
    => a[href]{…}

  • div의 id μš”μ†Œ μ΄λ¦„μ€‘μ—μ„œ μ•žμ—μ„œ λΆ€ν„° β€œsect” κ°€ κ²ΉμΉ˜λŠ” λͺ¨λ“  μš”μ†Œ
    => div[id^=”sect”]{…}

// λ‘˜λ‹€ ν•΄λ‹Ή
<div class="sector"></div>
<div class="section"></div>
  • div의 class μš”μ†Œ μ΄λ¦„μ€‘μ—μ„œ λ’€μ—μ„œ λΆ€ν„° β€œblog” κ°€ κ²ΉμΉ˜λŠ” λͺ¨λ“  μš”μ†Œ
    => div[class$=”blog”]{…}
// λ‘˜λ‹€ ν•΄λ‹Ή
<div class="My-blog"></div>
<div class="git-blog"></div>
  • div의 class 이름 같은 μœ„μΉ˜μ—μ„œ β€œw” κ°€ κ²ΉμΉ˜λŠ” λͺ¨λ“  μš”μ†Œ
    => div[class*=”w”]{…}
// λ‘˜λ‹€ ν•΄λ‹Ή
<div class="two"></div>
<div class="swim"></div>



πŸ‘Š λ‚΄μΌμ˜ TIW(today I Will)

twittler λͺ©μ—… κ΅¬ν˜„

← Previous Post Next Post →