CSS Selectors -Part II

As we have gone through few css selectors in the CSS Selectors-Part I we will continue to discuss some more now.

Pseudo class selectors

When we want to style anchor elements when they are hovered or visited or linked
For eg,

a:link{
   color: red;
  }
   

Visited link

a:visited{
    color: purple;
      }
    

X:checked

This selector will target a user interface element when it is checked and apply the styles. For eg when the checkbox and radio button is checked.
For eg,

X:checked{
         box-shadow:  5px 5px #dbdbdb;
     }
    

X:hover

Hover pseudo selector is used to apply CSS styles when the anchor tag is hovered.

a:hover{
   color: #000;
   background:#fff;
   border: 1px solid #000;
  }
   

Attributes selectors

Styling elements based on the attributes the tags have.

a[title]

a[title]{
   color:blue;
  }
   

a[href]

This selector will apply the style for anchor tags having title attribute.

a[href="http://gmail.com"] {
   color: #1f6053;
 }   
  

X:after / X:before

These selectors are used to generate content around the element.
For eg

p:after {
      content: " – Most important";
  }
   

The content will be added after the p tag.

X::pseudoelement

Pseudo elements are composed of two colons. Pseudo elements are applied to selectors like first element and first line.


p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}


Follow our FB page @CreativeTechnocrayts

Subscribe to Creative Technocrayts and be a part of growing community.