μ΄λ²μλ CSSμ μλν΄λμ€μ λν΄μ μμ보λλ‘ νκ² μ΅λλ€.
μλν΄λμ€λ νΉμ μ λ ν°μ νΉλ³ν ν¨κ³Όλ₯Ό λΆμ¬νκΈ° μν΄μ μ¬μ©λ©λλ€. Javascript λ μ΄λ ν λ€λ₯Έ script λ₯Ό μ¬μ©ν νμκ° μμ΅λλ€.
μλν΄λμ€λ₯Ό μ¬μ©νλ κΈ°λ³Έμ μΈ λ¬Έλ²μ λ€μκ³Ό κ°μ΅λλ€.
selector:pseudo-class {property: value} |
CSS ν΄λμ€λ₯Ό μ¬μ©ν μλ μμ΅λλ€.
selector.class:pseudo-class {property: value} |
λ€μμ κ°μ₯ λ§μ΄ μ¬μ©λλ μλ ν΄λμ€λ€ λͺ©λ‘ λ° μ€λͺ μ λλ€.
Value | Description |
---|---|
:link | Use this class to add special style to an unvisited link. |
:visited | Use this class to add special style to a visited link. |
:hover | Use this class to add special style to an element when you mouse over it. |
:active | Use this class to add special style to an active element. |
:focus | Use this class to add special style to an element while the element has focus. |
:first-child | Use this class to add special style to an element that is the first child of some other element. |
:lang | Use this class to specify a language to use in a specified element. |
<style>...</style> λΈλ½ λ΄μ μλ ν΄λμ€λ₯Ό μ΄μ©νκ² λ λμλ λ€μκ³Ό κ°μ μ¬νμ μ£Όμν΄μΌν©λλ€.
a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.
a:active MUST come after a:hover in the CSS definition in order to be effective.
Pseudo-class names are not case-sensitive.
Pseudo-class are different from CSS classes but they can be combined.
The :link pseudo-class
λ€μμ λ¨μν λ§ν¬μ μμμ λ³κ²½νλ μμ μ λλ€.
<style type="text/css"> a:link {color:#000000} </style> <a href="/html/index.htm">Black Link</a> |
The :visited pseudo-class
λ€μμ νλ² μ΄μ λ°©λ¬Έν λ§ν¬μ μμμ λ³κ²½νλ μμ μ λλ€.
<style type="text/css"> a:visited {color: #006600} </style> <a href="/html/index.htm">Click this link</a> |
The :hover pseudo-class
λ€μμ λ§μ°μ€ 컀μκ° λ§ν¬ μμ μ¬λΌκ°μ λ μκΉμ λ³κ²½νλλ‘ νλ μμ μ λλ€.
<style type="text/css"> a:hover {color: #FFCC00} </style> <a href="/html/index.htm">Bring Mouse Here</a> |
The :active pseudo-class
:active μλ ν΄λμ€λ νμ±νλ μμμ λν μμ±μ μ§μ ν©λλ€.
λ€μμ νμ±νλ λ§ν¬μ μμμ λ³κ²½νλ μμ μ λλ€.
<style type="text/css"> a:active {color: #FF00CC} </style> <a href="/html/index.htm">Click This Link</a> |
The :focus pseudo-class
μ΄ ν΄λμ€λ ν¬μ»€μ€λ₯Ό λ°μ μμμ λν μμ±μ μμ±κ°μ μ§μ ν λ μ¬μ©ν©λλ€.
λ€μμ ν¬μ»€μ€λ λ§ν¬μ μμμ λ³κ²½νλ μμ μ λλ€.
<style type="text/css"> a:focus {color: #0000FF} </style> <a href="/html/index.htm">Click this Link</a> |
The :first-child pseudo-class
:first-child μλ ν΄λμ€λ μ΄λ¦λ§ λ΄λ 첫λ²μ§Έ μμμ λν μμ±μ μ€μ νλκ±°λΌκ³ 보μ΄λ€μ.
μ΄ μλν΄λμ€λ₯Ό μ¬μ©νμλ €λ©΄ IE μμλ λ¬Έμ κ°μ₯ μλΆλΆμ <!DOCTYPE> λ₯Ό λ£μ΄μ£Όμ μΌ ν©λλ€.
κ·ΈλΌ μμ λ₯Ό νλ² λ³΄μμ£ . λͺ¨λ divνκ·Έμ 첫λ²μ§Έ λ¬Έλ¨μ μΈλ΄νΈνμ¬ νλ©΄μ λΏλ €μ£Όλ μμ μ λλ€.
<style type="text/css"> div > p:first-child { text-indent: 25px; } </style> <div> <p> First paragraph in div. This paragraph will be indented </p> <p> Second paragraph in div. This paragraph will not be indented </p> </div> But it will not match the paragraph in this HTML: <div> <h3>Heading</h3> <p> The first paragraph inside the div. This paragraph will not be effected. </p> </div> |
κ²°κ³Όλ μλμ κ°μ΅λλ€.
First paragraph in div. This paragraph will be indented Second paragraph in div. This paragraph will not be indented But it will not match the paragraph in this HTML: HeadingThe first paragraph inside the div. |
The :lang pseudo-class
:lang μλ ν΄λμ€λ νΉμ μμμ langμμ±μ λ°λΌμ λ€λ₯Έ κ°μ μ€ λ μ¬μ©ν©λλ€.
λ€κ΅μ΄ μ²λ¦¬λ₯Ό νμλ‘νλ μΉνμ΄μ§λ₯Ό λ§λ€λ μ μ©νκ² μ¬μ©νμ€ μ μμ΅λλ€. μλ₯Ό λ€λ©΄ μΈμ©λ¬Έκ΅¬ κ°μ κ²½μ°μ λΆμ΄μμλ κΊ½μ λκ°λ‘ μΈμ©λ¬Έκ΅¬λ₯Ό νννμ§λ§ μμ΄μμλ κ·Έλ₯ νλ°μ΄νλ μλ°μ΄νλ₯Ό μ΄μ©ν©λλ€. μ΄λ΄λ μ΄ :lang μλ ν΄λμ€λ₯Ό μ΄μ©νμλ©΄ μ’μ΅λλ€.
κ·ΈλΌ μμ λ₯Ό ν΅ν΄μ μ’λ μμ보λλ‘ νμ£ .
λ€μ μμ λ <blockquote> νκ·Έλ₯Ό νμ¬ μ¬μ©μ€μΈ μΈμ΄μ λ§κ² λ³κ²½ν΄μ€λλ€.
<style type="text/css"> /* Two levels of quotes for two languages*/ :lang(en) { quotes: '"' '"' "'" "'"; } :lang(fr) { quotes: "<<" ">>" "<" ">"; } </style> <p>...<q lang="fr">A quote in a paragraph</q>...</p> |
μ μμ μμ :lang μ λ ν°λ λ¬Έμ μ 체 μμμ μ μ©λ©λλ€.
κ²°κ³Όλ μλμ κ°μ΅λλ€.
...<<A quote in a paragraph>>...
|
Reference : http://www.tutorialspoint.com/css/css_pseudo_classes.htm
'π» Programming > CSS' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
[CSS] 25. @ Rules ( @ κ·μΉλ€ ) (0) | 2016.06.12 |
---|---|
[CSS] 24. Pseudo Elements ( μλ μλ¦¬λ¨ΌνΈ ) (0) | 2016.06.12 |
[CSS] 22. Layers ( λ μ΄μ΄ ) (0) | 2016.06.12 |
[CSS] 21. Positioning ( ν¬μ§μ λ, μμΉ ) (0) | 2016.06.12 |
[CSS] 20. Visibility ( κ°μμ± ) (0) | 2016.06.12 |