"Harry Potter! You C(SS) what I have become?"

Sorry for the Lord Voldemort quote as an opener... But these CSS selectors are a lot! And I needed something that would echo... the drama...

CSS selectors are taking over my life!!!

Part I: The latest one that I am learning is pseudo class.

It's quite confusing. 

This is actually really quite neat, though!

I wrote the following code:

a:hover {

  color : darkorange;

}

And it made it so that whenever you hover over a link it makes it go dark orange.

That was really neat!

Other examples of pseudo-class selectors are:

:focus

:visited

:disabled

:active

and again, once again, because I like it so much: 

:hover

Part II: Other Stuff I've Learned

• ID in CSS always overrides type and class
• ID's and classes are beginning to confuse me!
• ID applies to a specific element only
• Class ... I get it... but I mean like... what does it mean? Like... arrrrrgrgh

• I have learned about specificitY
• This is the order in which the browser decides which CSS styles will be displayed
• The hierarchy goes like this:
  
  ID>class> type (where ID is the highest specificity).

This wasn't enough for me, so here's a diagram!

Codecademy says it best:

Also:

• Chaining
• This was actually the easiest thing I'd learned so far all day. It's just a combination of all of the above! E.g. you can combine a type and a class:

p.important {

  color: red;

}

Seems pretty intuitive to me so far.

• Descendant Combinators
• This is when you add a style to a parent in the HTML (and maybe to a grandparent too? I don't know??!) and then you extend the style to its descendants.
• e.g. you would add a class to a <ul> element and then call the <li> elements by adding them in like so:
• <ul class ="funky">
• .funky li {
    color: hotpink;
  }
• Chaining and Specificity
• This basically just explains how the hierarchies of specificity I defined above apply when there are chained selectors.
• Multiple Selectors
• Seems pretty easy to me so far. 
• Multiple selectors have to be separated by 'commas'
• They seem to be put on a new line too, I'm guessing this is just best practise???!

Part III: New Solutions to Problems

One of the Engineering Managers at work has reached out to me after reading my blog posts!!! Thank you so much Adam! He asked me if I was using the Mozilla Developer Network (MDN). 

I told him that I wasn't much really - I'd been introduced to it as part of the course I'm doing, but that's it.

I looked at it and it gave me a really simple overview of CSS Selectors.

Codecademy is good for teaching things, but MDN looks like it might be good for revision!

Below are all of the CSS selectors, listed on MDN!!! 😮😯