Psudo selectors in css

pseudo selectors,pseudo elements,css pseudo element selector,pseudo elements tutorial,css pseudo elements,css pseudo elements tutorial,css tutorial,web development tutorial,css before and after pseudo elements,tutorial,css after tutorial,css before tutorial,lesson,app development,css,before,css after,css basics,css before,css before after,after,webdev,css before and after,css before and after explained,webdevsimplified.

Apply css on each input fields which have input type 'text' and 'email'

input[type='text'], input[type='email']{
   background:red;
}

Apply css on each a tag which have target attribute elements

<a href="google.com">Google</a> &nbsp; 
<a href="google.com" target="_blank">Facebook</a>

a[target]{
  color:red;
}

Apply css on each a tag which have target attribute of _self elements

<a href="google.com" target="_self">Google</a> &nbsp; 
<a href="google.com" target="_blank">Facebook</a>

a[target='_self']{
  color:red;
}

Apply css on nth child elements

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

li:nth-child(3){
  color:cyan;
}

Apply css on each 2nd elements ( start from n=0 )

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

li:nth-child(2n+0){
  color:cyan;
}

li:nth-child(even){ 
  color:cyan; 
}

.single-post p:last-child{
  display:none; 
}

Apply css on each odd elements 

<ul> 
  <li>1</li> 
  <li>2</li> 
  <li>3</li> 
  <li>4</li> 
  <li>5</li> 
</ul> 

li:nth-child(2n+1){ 
  color:cyan; 
}

li:nth-child(odd){ 
  color:cyan; 
}

Apply css and add content before and after

<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

#ul::before{
  content:'this is content before';
}

#ul::after{
  content:'this is content after';
}

(In case of when text is not appearing good because of background image)
#ul::before{
content:'';
background:url('url');
height: '';
width:'';
position:absolute;
z-index:-1;
}