CSS Selectors

Selector CSS

The Universal Selector

				
					*{

}
				
			
  • It is universal selector which select all the elements.

The Attribute Selector

  • This allows to select elements based upon the particular attribute
				
					Input [type= “email”] {

}
				
			
  • Email, checkbox, text, password are included in it.
  • We have others attributes
				
					a[href*= “wiki”] {
    Color: blue;
}

				
			
				
					a[href^=” #”] {
    Color: gold;
}
				
			
				
					a[href$= “.org”] {
    Color: red;
}
				
			
  • Links with “wiki” anywhere in the URL
  • Links with a URL that start with “#”
  • Links with a URL that ends with “.org”
  • The links we use  # means an element with same id in that page
				
					<a href= “#featured” > </a>
				
			

Grouping Selectors

  • Multiple selectors are separated by comma
				
					h1, a {

}
				
			

Descendant & Child Combinators

Descendant

  • The (space) combinator selects element that are descendants of the first element.
				
					Div h2 {
    Color: red;
}
				
			

Child combinator

  • The > combination selects elements that are direct children of the first element.
				
					Ul > ol {

}
				
			

Compound Selectors

  • We can combine class, id and elements selectors (without spacing). This example selects divs with the class “special
  • In HTML
				
					<div class= “special” > 
      <h2> OMG HAHA </h2>	
</div>

				
			
  • In CSS
				
					div.special {

}

				
			
Facebook
Twitter
LinkedIn
Pinterest
WhatsApp

Table of Contents

Ghulam Ahmad is an Excellent Writer, His magical words added value in growth of our life. Highly Recommended

Read more about poetries

Ahmad Shafi Poetry

Leave a Reply

Your email address will not be published. Required fields are marked *