Learn CSS Selectors





We use CSS Selectors, to deteced and control the HTML elemenet or div we want to style or "change"


There are five types of CSS selectors:


  • CSS regular selectors (select elements based on id, class etc)
  • CSS Attribute selectors (select elements based on an attribute)
  • CSS Pseudo-elements selectors (select just part of element)
  • CSS Pseudo-class selectors (select depend on a state)
  • CSS Combinator selectors (select based on a specific relationship between elements)





Part 1

CSS id Selector


We use the id selector to control unique elemenet with an id.


Code Example:


We control the id "box" using CSS id selector:


             <style>
       #box 
       {
  color: green;
  text-align: center;
  font-size:50px;
} 
</style> 
  
Try yourself >>






Part 2

CSS element Selector


We use the element Selector to control elements based on their name.


Code Example:


We control the entire page Paragraphs:


             <style>
      p {
  color: green;
  text-align: center;
  font-size:50px;
} 
</style> 
  
Try yourself >>






Part 3

CSS Universal selector


We use the Universal selector to control all HTML elements that located in the current page.


Code Example:

       <style>
* {
color: green;
font-size:25px;
} 
</style> 
Try yourself >>






Part 4

CSS class Selector


We use the class selector to control HTML elements that associated with a class attribute, we use a period to use the class selector :


Code Example:

       <style>
.jackSparrow 
{
  color: green;
  text-align: center;
} 
</style> 
Try yourself >>


You can control specific part of the class for example if we have class that contain paragraphs and other elemenets we can control only paragraphs:



Code Example:

       <style>
.jackSparrow p 
{
  color: green;
  text-align: center;
} 
</style> 
Try yourself >>






Part 5

CSS Grouping Selector


We use the grouping Selector to control HTML elements with the same style definitions


Code Example:

       <style>
p {
  color: green;
  text-align: center;
}
h1 {
  color: green;
  text-align: center;
}

h2 {
  color: green;
  text-align: center;
}

/* You can also be more efficient: */

p, h1, h2 {
  color: green;
  text-align: center;
}
</style> 
Try yourself >>









Where to learn CSS in 2020?, you are in the right place, CSS coding for beginners and above, we are the best website to learn html css and for free, we will always be free, learn html and css fast.



Navigation