{"id":1671,"date":"2015-08-31T11:04:43","date_gmt":"2015-08-31T16:04:43","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1671"},"modified":"2015-08-31T11:04:43","modified_gmt":"2015-08-31T16:04:43","slug":"pseudoclasscss","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/pseudoclasscss\/","title":{"rendered":"The case for using the Pseudo Class in CSS"},"content":{"rendered":"

Pseudo Classes are a crucial part of CSS. They allow developers to apply styles to elements under certain conditions. For example, if there is a <div> tag with 3 <p> tags inside of it, the :nth-child pseudo selector is able to specify which one of the <p> tags to apply a style to without needing a bunch of ids. Selecting elements without using ids is also really useful in dynamically generated websites, where a developer may want to style the first and last elements differently than the middle ones.<\/span><\/p>\n

 <\/p>\n

Some pseudo classes are more than just a way to avoid an overload of ids, such as :hover. :hover allows developers to customize an element when the cursor is hovering on top of it. The :hover is a common part of customizing the look of standard links, which already have :hover events and may look ugly without customization.<\/span><\/p>\n

 <\/p>\n

Here is a demo of what can be achieved with pseudo classes. It will use a google font called Roboto, which can be added to most projects using the methods provided on https:\/\/www.google.com\/fonts . This demo won\u2019t contain a single id or class, yet it will still look nice and have basic functionality in the end with the power of pseudo classes. To start, create a <div> and 3 child <p> elements with <div> tags in between the <p> tags like this:<\/span><\/p>\n

\"Screen<\/span><\/p>\n

 <\/p>\n

 <\/p>\n

It should look something like this:<\/p>\n

\u00a0\"Screen<\/a><\/strong><\/strong><\/p>\n

 <\/p>\n

 <\/p>\n

Now the HTML is complete and we can move onto the CSS.<\/span><\/p>\n

\u00a0<\/strong><\/strong><\/p>\n

Start by styling the p tags with this:<\/span><\/p>\n

\u00a0\"Screen<\/a><\/strong><\/strong><\/p>\n

 <\/p>\n

 <\/p>\n

Then try out the pseudo selectors :first-child, and :nth-child() like this:<\/span><\/p>\n

 <\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

Now, it may seem odd that :nth-child() needed a 3 and 5 to select the correct elements versus 2 and 3. After all; it looks like the CSS is describing the third <p> tag inside of a <div>. It turns out that :nth-child() actually is describing the 3rd element of the parent element that happens to be a <p> tag. If we had typed \u201cdiv p:nth-child(2)\u201d, that would be interpreted as find a <p> that is the 2nd child of a <div>. It wouldn\u2019t have found anything because the second child of our <div> isn\u2019t a <p>.<\/span><\/p>\n

 <\/p>\n

Next, style the <div> tags inside of the parent <div> like this:<\/span><\/p>\n

\u00a0\"Screen<\/a><\/strong><\/strong><\/p>\n

 <\/p>\n

 <\/p>\n

Which should produce this:<\/span><\/p>\n

\u00a0\"Screen<\/a><\/strong><\/strong><\/p>\n

Doesn\u2019t that look nice and customizeable? Now lets add some :hover functionality to really make it shine.<\/span><\/p>\n

\u00a0<\/strong><\/strong><\/p>\n

Its this easy to capture the hover event:<\/span><\/p>\n

\"Screen<\/p>\n

 <\/p>\n

Now when a <p> tag is hovered over it will turn black. :hover can make a site feel much more alive when used properly.<\/span><\/p>\n

\u00a0<\/strong><\/strong><\/p>\n

View and customize\u00a0the result here: <\/span>https:\/\/jsfiddle.net\/MorganMeliment\/zk4u5f8j\/<\/span><\/a><\/p>\n

 <\/p>\n

Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

Pseudo Classes are a crucial part of CSS. They allow developers to apply styles to elements under certain conditions. For example, if there is a <div> tag with 3 <p> tags inside of it, the :nth-child pseudo selector is able […]<\/p>\n

Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":1672,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[168,173,192],"tags":[62,79,82,49,107,105,155,156],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1671"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1671"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1671\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/1672"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1671"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1671"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1671"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}