This page is also somewhat ugly by design, as it is designed to introduce different CSS selectors!

Basic Selectors: Universal and Element Selectors

The universal selector * covers everything, but its use is not recommended. It will attempt to change all elements on the page, but lacks control
The element selector (e.g. <button>/<h1gt; etc...) changes all elements of the type specified. My page uses an ugly plum color to help illustrate this, although I like the font I found via Google Fonts.
```
                
                    h2{
                        font-family: 'Open Sans', sans-serif;
                        background-color: plum;
                    }
                
            
```

Using a ,(comma) to separate elements is also acceptable. For example, the simple code below means that both <h1> AND <h2> will have their attributes adjusted. Later on in this section, you'll see that ID-types and class-types can be represented in the same way. Don't worry about the options presented for now!

                    
                        h1+h2{
                            font-weight:100;
                        }
                        .complete+h1{
                            position:relative;
                        }
                        #id+h1{
                            transform:scale(0.5);
                        }

ID Selectors

We can use the # (representing a specific ID) to zero in on individual elements which use them inline. In my example, I changed the background-color of my sign-up button to #1d3557. This specific <button> element

            
                #signup {
                    background-color: #1d3557;
                    color: #f1faee;
                }

Of huge importance: an ID of any specific name should only be used once on a single HTML page. We shouldn't overuse ID selectors, although there's no need to avoid using them! A handful on a single page seems to be optimum, but class selectors are much more commonly used.

Class Selectors

Below is some code representing popular posts from a Reddit-like forum. Below the header, it's comprised of a group of <section> elements of class post. The reason why will become clear later. In my document, each username for the post is contained with a <span>. Remember that <span> is a generic inline element)

The first thing that is changed from the original document, is to change the <span>. To help with this, I introduced a class called tag, with the properties shown:

                    
                        .tag {
                            background-color: #e63946;
                            color: #f1faee;
                            font-size: 16px;
                        }

Below, the first post by not_funny doesn't include the span. The other two do!

Popular Posts

Posted by /u/not_funny

Lol look at this hilarious meme funny

Posted by /u/gooner4lyfe

Happy birthday to the strongest defender/bodyguard in the Prem! gunners

Posted by /u/dogfan

This Corgi got some good stuff from the vet. dogs

The Descendant Selector

Where we use space or comma between elements in the css file is very important!

Here, the space in the h1 h2 code means that any descendant <h2> INSIDE a <h1gt; element will have its attributes adjusted:

                    
                        h1 h2{
                            color:gold;  
                        }

On the other hand, a comma (,) between <h1> and <h2> simply means h1 and h2! Thus, h1,h2,h3 = h1 AND h2 AND h3!

                    
                        h1,h2{
                            color: gold;
                        }

As another example of how SPACE allows for descendants to have their attributes adjusted, we can choose to select all anchor (<a>) elements that are nested inside a list element (<li>.). So, no li tags would be styled! ONLY anchor tags <a> that are inside an <li> tag would be styled. To change the text of the links to the users, we can use the following:
```
                    
                        li a{
                            color:pink;
                        }
                    
                
```
As mentioned, two of the <section> elements above have the class 'post' appended to them. All anchor tags within the class post have been made pink! Compare and contrast the above posts to see what happened!
```
                footer a
                    .post a {
                        color: pink;
                    }                    
                
            
```

Finally, the code for footer SPACE a (i.e. any <a> found INSIDE OF (or descending from) <footer>) was used to change the color to a lurid magenta color!

                    footer a{
                        color: magenta;
                        }

The Combinator (Adjacent Selector/Adjacent Sibling Selected) and Direct Child/Direct Descendant Selector

h1,h2 {...} : as you know, the comma means h1 AND h2
h1 h2{...}: the space means any descendant h2 INSIDE OF h1 will have attributes adjusted

The + sign just means that any <h2h2> that is immediately preceded by a <h1> will have its attributes adjusted, in this case, to the color yellow!

                    
                        h1+h2{
                            color:yellow;
                        }:

The plus sign (in something like either the above, or h1+p {...}) is known as a COMBINATOR. These will ONLY change the 2nd element if immediately preceded by the first. In this case, all paragraphs immediately preceded by h1 would be changed. Look at h1+h2 above once more!

Also, the > sign below denotes that any <h2h2> element that's a DIRECT CHILD (as opposed to a non-direct descendant nested deeply inside of) a <h1gt; element will be aquamarine in color.

                    
                        h1 > h2{
                            color:aquamarine;
                        }:

Child/Direct Descendant Selectors are quite easy. They make use of the > sign, as in footer > a, in my CSS file! Essentially, it demands that ONLY direct descendants of a specific selector are looked at. In our page's example, the odd corgi button inside the <h2> element has been changed to slightly more garish colors. See also footer>a in the CSS file!
```
                    
                        h2>button {
                            background-color: magenta;
                            font-size: 20px;
                        }
                    
                
```

The Attribute Selector

Examples

This selects all <input> elements where the type attribute is set to text

                
                    input[type="text"]{
                        color:blue;
                    }:

This selects all <input> elements where the type attribute is set to password:

                    
                        input[type="password"]{
                            color:blue;
                        }

This selects all <input> elements where the class attribute is set to post:

                        
                            section[class="post"]{
                                color:pink;
                            }

This selects all <a> elements where the href attribute matches the www.rabogan.github.io website:

                    
                        a[href="https://www.rabogan.github.io"]{
                            color:black;
                        }

Although little uncommon, the above allows us to select all elements that contain a SPECIFIC ATTRIBUTE: for example, changing the color for all inputs of type 'password'
There are multiple attribute selectors (most rarely used), such as:

The = used in this way denotes a DIRECT match

                        
                            element1=[attribute="example"]{
                                color:coral;
                            }

In the example below, *= denotes a 'fuzzy' match. So, if a <hrefgt; element contains even the sequence 'goo', that could take you to google, goodbar, gooner4lyfe etc...

                        
                            element1*=[attribute="example"]{
                                color:yellow;
                            }

Finally, $= is used to mean that the match for an element must end with "example". This is most often used in websites!

                        
                            element1$=[attribute="example"] {
                                color:yellow;
                            }

There are SO many examples to explore!

Pseudo-classes

A pseudo-class in CSS is a keyword added to a selector that specifies a special state of the selected element

Common examples include :hover, :visited, :nth-child(), and :active

A common example is to change the color of a button when the mouse is hovering over it! To do this, we need to use a pseudo-class in our CSS file. In my example, I used button:hover{...}, and changed the background-color and color of all buttons that don't have their specificity overridden!

So, to change all buttons so that when the mouse is over them, the background-color changes to red and text to white, we use button:hover{...}, where ... is the color changes

Another example is this: input[type="radio"]:checked{...} In this, all inputs of type radio that have been checked will have specific attributes adjusted (usually some kind of box-shadow)

Finally, :nth-of-type() is very useful. Plugging in a number, e.g. p:nth-of-type(2){...} will simply changed the 2nd p-element among siblings of type p. However, p:nth-of-type(2n){...} will change every 2nd element among siblings of type p

Briefly, pseudo-elements

A pseudo-element in CSS is a keyword added to a selector that allows you to style a specific part of the selected element(s)

Common examples include ::before, ::after, ::selection, ::first-line, and ::first-letter

Within this page, my example involves having the first letter of every h2 tag on the page be resized to 36px: h2::first-letter{...}

In addition, the ::selection{...} standalone code in my CSS file made it so that most selected text is red and gold

The parts that differ are for any text selected with a h2: inspect to see why!

Specificity

This is quite an easy concept. Basically:

ID > Class > Element > Universal (Class includes pseudo-classes, Element includes pseudo-elements)
The common tiebreaker is to count the number of each type, with precedence given the highest leftmost type
If there are an identical number of classes/ids/pseudo-things/etc..., then the LAST one read as input (i.e. the last one entered in the stylesheet, or the last one of the last-entered stylesheet in the head section) will take precedence!

One thing to note is that inline styles have higher specificity than ids! For example, something like <button> style="color:coral"> will trump any number of ids, classes or elements associated with a button in the CSS stylesheet. They're avoided because they can cause serious confusion

On the topic of confusion, the !important exception is an example of bad practice. When the !important rule is used on a style declaration, it signals to the browser that the specific declaration should override ANY other declarations. Why is it bad practice? Simply, it makes things difficult to debug, as it breaks the cascading between stylesheets!

Finally, this link which helps to compare specificity might be very useful: Compare Specificities Here

Inheritance

This should be an intuitive concept for you!

Move on to the CSS Box Model