16. μ λ ν° μ‘°ν© + μμ μ λ ν° + μμ μ λ ν° + μ 체 μ λ ν°μ μμ± μ λν° + κ°μ ν΄λμ€ μ λ ν°(pseudo-class)
# μ λ ν° μ‘°ν©νκΈ°
- 2κ° μ΄μμ μ λ ν° μ‘°ν©
: μ‘°ν©μ μ ν©ν HTML νκ·Έμλ§ μ μ©
- μμ μ λ ν° (child selector)
: λΆλͺ¨ μμ κ΄κ³μΈ λ μ λ ν°λ₯Ό '>' κΈ°νΈλ‘ μ‘°ν©
ex) <div> μ μ§κ³ μμμΈ <strong>μ μ μ©λλ μ€νμΌ μνΈ
div > strong { color : dodgerblue ; }
- μμ μ λ ν° (descendent selector)
: μμ κ΄κ³μΈ 2κ° μ΄μμ νκ·Έλ₯Ό λμ΄
ex 1) <ul> μ μμ <strong> μ μ μ©λλ μ€νμΌ μνΈ
ul strong { color : dodgerblue ; }
ex 2)
# μ 체 μ λ ν°
: μμΌλ λ¬Έμ(*)λ₯Ό μ¬μ©νμ¬ λͺ¨λ νκ·Έμ μ μ©μν€λ μ λ ν°
ex) μΉ νμ΄μ§μ λͺ¨λ νκ·Έμ μ μ© <- ν μ€νΈ μμ green μΌλ‘
* { color : green ; }
# μμ± μ
λ ν°
: HTML νκ·Έμ νΉμ μμ±μ λν΄ κ°μ΄ μΌμΉνλ νκ·Έμλ§ μ€νμΌ μ μ©
ex 1) type μμ±κ°μ΄ "text" μΈ <input>νκ·Έμ μ μ©
input [ type = text ] { color : red ; }
ex 2)
# κ°μ ν΄λμ€ μ λ ν°(pseudo-class)
: νΉμ 쑰건μ΄λ μν©μμ μ€νμΌμ μ μ©
- κ°μ ν΄λμ€ μ λ ν°(pseudo-class)μ μ ν
ex 1) λ°©λ¬Έν <a>μ λ§ν¬ ν μ€νΈ μμ green μΌλ‘ μΆλ ₯
a : visited { color : green ; }
ex 2) <li> νκ·Έμ λ§μ°μ€κ° μ¬λΌμ€λ©΄ yellowgreen μ λ°°κ²½μμΌλ‘ μΆλ ₯νκ³ , λ§μ°μ€κ° λ΄λ €κ°λ©΄ λ€μ μμνλ‘ λ³΅κ·
li : hover { background : yellowgreen ; }
ex 3) :firstletter μ :hoverμ μ¬μ© μ¬λ‘
ex 4)