CSS

1. CSS Home 2. CSS Introduction 3. CSS Versions 4. CSS Extension 5. Adv.& Disadv of CSS 6. HTML v/s CSS 7. CSS Syntax 8. CSS Selector 9. Inserting CSS file 10. Class 11. ID 12. Div 13. Font 14. Font-size 15. Font-weight 16. Font-style 17. Font-variant 18. Text 19. Text-color 20. Text-decoration 21. Text-transform 22. Text-indent 23. CSS Color 24. Web Safe Color 25. Background-image 26. Background-repeat 27. Background-position 28. Background-attachment 29. Background-size 30. Background-origin 31. CSS Box Model 32. Padding 33. Padding-top 34. Padding-right 35. Padding-bottom 36. Padding-left 37. Margin 38. Margin-top 39. Margin-right 40. Margin-bottom 41. Margin-left 42. Margin Demonstration 43. Border 44. Border-style 45. Different Border-style 46. Border-width 47. Different Border-width 48. Border-color 49. Border-radius 50. Border-collapse 51. Border-spacing 52. Border-image 53. Border-bottom 54. Border-bottom-style 55. Border-bottom-width 56. Border-bottom-color 57. Border-bottom-left-radius 58. Border-bottom-right-radius 59. Border-top 60. Border-top-style 61. Border-top-width 62. Border-top-color 63. Border-top-left-radius 64. Border-top-right-radius 65. Border-right 66. Border-right-style 67. Border-right-width 68. Border-right-color 69. Border-left 70. Border-left-style 71. Border-left-width 72. Border-left-color 73. Ex.Padding,Border,Margin 74. List Style 75. List Style-type 76. List Style-position 77. List Style-image 78. Dimension Properties 79. Width 80. Max-width 81. Min-width 82. Height 83. Max-height 84. Min-height 85. Grouping Selector 86. Nesting Selector 87. Floating 88. Position 89. Pseudo Element 90. First-letter Pseudo 91. First-line-Pseudo 92. Before & After Pseudo 93. Pseudo-class Selector 94. tag 95. Image Gallery 96. Scrollbars 97. Display Property 98. Cursor Property 99. Caption-side Property 100. Transform Property 101. Interview Question and Answer part 1 102. Interview Question and Answer part 2 103. Interview Question and Answer part 3 104. Interview Question and Answer part 4 105. Interview Question and Answer part 5 106. Interview Question and Answer part 6 107. Interview Question and Answer part 7 108. Interview Question and Answer part 8
Pr.Pg Next Pg

Pseudo-Class Selectors tutorials

  • A pseudo-class is similar to a class in HTML, but it’s not specified explicitly in the markup. Some pseudo-classes are dynamic—they’re applied as a result of user interaction with the document.

  • A pseudo-class starts with a colon (:). No whitespace may appear between a type selector or universal selector and the colon, nor can whitespace appear after the colon.

  • CSS1 introduced the :link, :visited, and :active pseudo-classes, but only for the HTML a element. These pseudo-classes represented the state of links—unvisited, visited, or currently being selected—in a web page document. In CSS1, all three pseudo-classes were mutually exclusive.

Note: While defining pseudo-classes in a <style>...</style> block, following points should be taken care:

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.

 

Commonly used CSS Pseudo-classes

 

Selector

Description

:link

Selects unvisited links

:visited

Selects all visited links

:hover

Selects link when mouse is over it.

:active

Selects all active link

:focus

Selects the input element from various elements.

 

:link pseudo-class:

  • The :link pseudo-class matches link elements that are determined to be unvisited.

  • The two pseudo-classes :link and :visited are mutually exclusive: a link is either visited or unvisited. As such, a selector like a:link:visited should never match any element.

 

Syntax:

Selector:link { Properties }

 

  • Browser support: The :link pseudo-class supported to all major browsers like, Internet Explorer 3+, Chrome 1+, opera 3+, Safari 1+, Firefox 1+.

 

 

:visited pseudo-class:

  • The: visited pseudo-class matches link elements that are determined to have been visited.

  • In CSS1, this pseudo-class applied only to a elements that had an href attribute (that is, a hypertext link).

  • The two pseudo-classes :link and :visited are mutually exclusive: a link is either visited or unvisited.

 

Syntax:

Selector:visited { properties }

 

  • Browser support: The :visited pseudo-class supported to all major browsers like, Internet Explorer 3+, Chrome 1+, opera 3+, Safari 1+, Firefox 1+.

 

:hover pseudo-class:

  • This pseudo-class matches any element when the mouse is over them.

  • It would apply, for instance, for the duration of a mouse over a link, from the point at which the mouse comes in contact of link until the point when mouse leaves.

 

Syntax:

a:hover { properties }

 

Note:-  :hover (if present) must be defined before :active Pseudo in the CSS definition in order to be effective!

  • Browser support: The :hover pseudo-class supported to all major browsers like, Internet Explorer 3+, Chrome 1+, opera 3+, Safari 1+, firefox 1+.

 

:active pseudo-class:

  • This pseudo-class matches any element that’s in the process of being activated.

  • It would apply, for instance, for the duration of a mouse-click on a link, from the point at which the mouse button’s pressed down until the point at which it’s released again.

 

Syntax:

a: active { properties }

 

Note:-  :active MUST come after :hover (if present) in the CSS definition in order to be effective!

  • Browser support: The :active pseudo-class supported to all major browsers like, Internet Explorer 3+, Chrome 1+, opera 3+, Safari 1+, firefox 1+.

 

Example: Program example to explain CSS Pseudo Class
Output:
Pr.Pg border                                              Next Pg