CSS, pseudo-class, pseudo-element: hover, child, target

By combining HTML and CSS, you can control absolutely all elements of a web page. Using styles, you can easily change the look of any block or line. Often the layout designer needs to perform a more complex task - to change the appearance of not the element itself, but its individual part or a certain state. In this case, CSS pseudo-classes come to the rescue.

, , . , . : , , . JavaScript, ? :hover CSS. , .

CSS pseudo-class




CSS . , , . , CSS3.

:nth-of-type

, , , . . , , , – , , . . , . .





hover css




. CSS :nth-of-type. , . : , , . , :nth-of-type(even) , :nth-of-type(odd) – . , . – , .

:nth-child

CSS , . , <li> , ul:nth-child, <ul> <li>.

css link pseudo classes




. , , . : an+b, – , b – . , n, ( b). n+2, , ( ). . .





:last-child

. CSS child . . , , , .

:nth-last-child

nth-child, , . . -. , .

pseudo-classes css child




, CSS , . . :nth-child, :nth-last-child – , , . .

, ? CSS , . .

:link

CSS, , , . <a>, .

:visited

, . , <a> , . , .

:target CSS

, JavaScript. , . , . .

pseudo-classes pseudo-elements css




, 3 div id: id1, id2, id3. href: #id1, #id2, #id3. id.

CSS div display:none, . target:div display:block. , href, id display:block, , ! href=”#id1” id1, . .

? . . .

,

. <a>. .

Pseudo-class target css




  • :active , ;
  • :hover – CSS , ;
  • :focus – , . . , , .

, :active . , . . . , , – , – , . .

pseudo class css click




, . , IE6 7 focus, hover active IE6 . , , , .

. CSS (:enabled) (:disabled), checkbox radio (:checked). , .

  • :only-child - , ;
  • :lang - , lang;
  • :root - . , HTML <html>;
  • :not - . . : .blue-color:not(span). blue-color, <span>.

. , JavaScript. , , , , .




All Articles