{"id":402,"date":"2015-08-07T11:42:50","date_gmt":"2015-08-07T11:42:50","guid":{"rendered":"http:\/\/fazilabdulkhadar.com\/?p=402"},"modified":"2021-02-23T10:06:02","modified_gmt":"2021-02-23T10:06:02","slug":"difference-between-pseudo-classes-and-pseudo-elements","status":"publish","type":"post","link":"http:\/\/fazilabdulkhadar.com\/index.php\/2015\/08\/07\/difference-between-pseudo-classes-and-pseudo-elements\/","title":{"rendered":"Difference between Pseudo-Classes and Pseudo-Elements"},"content":{"rendered":"

A.: Pseudo-Classes – Pseudo-Classes are specified a special state of the element to be selected. In other word, Pseudo-classes are target elements that match certain criteria or state.
\nFeatures
\nPseudo class is signified by a single colon (:) followed by the name of a Pseudo class.
\nExample
\n1.: hover – Style an element when a user mouses over it.<\/p>\n

\"\"<\/div>\n

2.: visited,: link – Style visited and unvisited links differently
\n3.: focus – Style an element when an element has received focus, either from the user selecting it with the use of a keyboard.<\/p>\n

List of Pseudo-classes<\/strong>
\n:active, :checked, :default, :dir(), :disabled, :empty, :enabled, :first, :first-child, :first-of-type, :fullscreen, :focus, :hover, :indeterminate, :in-range, :invalid, :lang(), :last-child,\u00a0:last-of-type, :left, :link, :not(), :nth-child(), :nth-last-child(), :nth-last-of-type(), :nth-of-type(), :only-child, :only-of-type, :optional, :out-of-range, :read-only, :read-write, :required, :right, :root, :scope, :target, :valid, :visited<\/p>\n

B.:: Pseudo-elements<\/strong> – \u00a0Pseudo-elements allow you to style certain parts of a document.
\nFeatures<\/strong>
\n* Pseudo-elements is signified by a two colon (::) followed by the name of a Pseudo class.
\n* IE8 will not support the Pseudo-elements.
\n* If your browser supports two colon Pseudo-elements that also support the single colon Pseudo-classes.
\nExample<\/strong>
\n1. ::first-letter – Style the first letter of a element.<\/p>\n

\"\"<\/div>\n

2.::first-line – Style the first line of an element.<\/p>\n

\"\"<\/div>\n

List of Pseudo-elements<\/strong>
\n::after, ::before, ::first-letter, ::first-line, ::selection, ::backdrop<\/p>\n

Remember<\/strong>:\u00a0Pseudo class is signified by a single colon (:<\/strong>)followed by the name of a Pseudo class and\u00a0Pseudo elements is signified by a two colon (::<\/strong>) followed by the name of a Pseudo class.<\/p>\n","protected":false},"excerpt":{"rendered":"

A.: Pseudo-Classes – Pseudo-Classes are specified a special state of the element to be selected. In other word, Pseudo-classes are target elements that match certain criteria or state. Features Pseudo class is signified by a single colon (:) followed by the name of a Pseudo class. Example 1.: hover – Style an element when a…<\/p>\n","protected":false},"author":1,"featured_media":403,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43],"tags":[],"class_list":["post-402","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html"],"_links":{"self":[{"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/posts\/402","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/comments?post=402"}],"version-history":[{"count":3,"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/posts\/402\/revisions"}],"predecessor-version":[{"id":1065,"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/posts\/402\/revisions\/1065"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/media\/403"}],"wp:attachment":[{"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/media?parent=402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/categories?post=402"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/tags?post=402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}