Explain CSS Basic Selectors

• Universal Selector:
  
  A universal selector is used to apply something to every element on the page.
  Universal Selectors have a no specificity so they have the lowest priority
  and other selectors will always be chosen over them when there is conflicting
  CSS applied to an element or elements.
  A universal selector will start with an asterisk like so:
  
  * {
  background-color: purple;
  font-weight: bold;
  color: aqua;
  }


• Element Selector:
  
  An element selector has a specificity value of 1, and it is used usually
  to apply a rule to the element selected. A regular element selector has
  no symbol to represent it and will instead start with the name of the
  element it is being applied to. So in the following element selector
  since p would be the start of the rule this would select every p element
  on the page and make them all turn red unless another conflicting rule
  with a higher specificity value exists in the CSS.
  
  p {
  color: red;
  }


• Pseudo Elements:
  
  Pseudo elements also have a specificity value of 1 since they are stil an
  element selector, and they are used when you want to style a specific part
  of an element. For example the following rule would make the first letter
  of every p element on a page bigger and change its color to blueviolet.
  As shown in the following example rule the symbol to identify a pseudo
  element is two :: colons like the ones shown
  next to the word colon above.
  
  p::first-letter {
  font-size: large;
  color: red;
  }


• Group Selector:
  
  Group selectors are used to make your code more concise and run faster.
  They allow you to select multiple elements at once by grouping them
  together with camas as seen in the following rule.
  
  h1, h1, h3, p {
  color: orange;
  }
  
  If you were to use this CSS code on an html page it would make the
  h1, h2, h3, and p elements all orange. As you can see this is more
  efficient than creating rules individually for each element to be orange
  


• Descendant Selector
  
  Descendant selectors are best used for specific sectiion in your
  code where you have one element nested inside another and want to
  apply a rule to just that specific child element inside the other
  element. These selectors would have a higher specificity than a
  regular element selector because it requires multiple specific
  elements to be applied to as seen in the example CSS rule below
  
  p ol {
  color: blue;
  }
  
  As you may have guessed this rule would make all ol elements
  inside of p elements become blue on a page. And as you have
  observed a descendant selector is written as parent element
  selector (space) child element selector.


• Pseudo Class Selectors:
  
  Pseudo classes are class selectors that are mostly used for
  links, however they can be used on other elements as well.
  Pseudo classes are recognizable by their use of one :colon.
  They are used to style an element when something happens or
  has happened to it. For instance the example below would make
  the a element change its background color to yellow when hovered
  over. And since pseudo classes are classes they generally have a
  specificity value of 10 so they are higher up than any of the
  previous selectors on this list.
  
  a:hover {
  background-color: yellow;
  }
  
  


• Independent Class Selector:
  
  An independent class selector is basically the standard class
  selector and is used to call for styles in specific spots in
  your html code. It is recognizable by having a period and then
  the name of the class, and it has a specificity value of 10.
  Classes other than pseudo classes however must be called for
  in the html code to affect an element for instance the rule
  below will turn an element's text green but only if you first
  call for the class "green" in the code like this class="green" in
  the starting tag of an element.
  
  .green {
  color: green;
  }
  
  


• Dependent Class Selector:
  
  Dependent class selectors are much like independent ones
  except for one key difference, these can only be applied
  to the element that they have in front of them in the CSS
  code. As such they have a higher specificity than an
  independent class selector since they generally have a
  specificity value of 11. Below is an example of a dependent
  class selector that turns any p elements that call for it in
  the html code red.
  
  p.red {
  color: red;
  }
  
  In case you are wondering you would call for a dependent class
  selector in the same way you would call for a independent one.
  So this one would be called for like class="red" on the html code.


• Independent ID Selector:
  
  An independent ID selector shares effectively the same purpose and function
  as the independent class selector except it has a higher specificity
  value of 100. Another difference between them is that the class starts
  with a period while a ID starts with a #. And you call for an ID in html code
  with id="" instead of class="". For instance you would call for the following
  example with id="bold" to make the element given this ID a font-weight of bold.
  
  #bold {
  font-weight: bold;
  }
  
  


• Dependent ID Selector:
  
  Dependent ID selectors function much like dependent class selectors
  but once again by calling for an ID. So they apply only to the specific
  element that is in the rule and only to those elements in the rule that
  call for it in the html code thus this means that out of the selectors
  on this list they have the highest specificity value at 101. This is how
  you would call for the following example in html code id="bold".
  
  p#bold {
  font-weight: bold;
  }
  
  This example would make the text in the paragraph elements that called
  for it have a font-weight of bold.