Web_Dev_Grad

We saw in the CSS home section, how a paragraph was “selected” in CSS for a rule to be applied. However there are numerous ways in order to select the element you want to apply a rule to in CSS. These selectors are outlined in this section covering how to target any HTML element that you want

The universal selector (*) selects all the elements on you webpage. This is useful to include at the top of your CSS file so as to remove any unwanted default stylings. I tend to include:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

More about these specific declarations will be discussed later but for now it is enough to know that it resets all the spacing around elements to 0 so that I can work on them from scratch. Otherwise, I find some the spacing is inconsistent across different elements resulting in me having to individually give them these declarations every time an issue crops up.

Type selectors select all HTML elements of that type. For example all paragraph <p></p> elements can be selected with:

p {
    color: green;
}

Class selectors select, well, all of that class. This is where attaching classes in HTML really shows its strengths. To target classes, use a period before the classname as the selector. For instance if you gave specific paragraphs and headings the attribute of class=”green-text”, you could make them all green with the following CSS rule:

.green-text {
    color: green;
}

ID selectors will target the element that you have given the specific ID attribute value to. Remember, there will only be one element with this ID per page. Target them with the hash/pound/hashtag symbol and the id name. For example giving a title the id of “website title” an underline:

#website_title {
    text-decoration: underline;
}

You can also select your elements based on the attributes given to them. You can specify what attribute you are targeting by defining it within square brackets. For instance your external links are likely to be anchor tags with target="_blank" for them to open in a new tab. In order to target these but not internal links (that will not have a target attribute) you could use:

[target] {
    color: green;
}

You can also target elements what have a specific value for their attribute by putting the element type before the square brackets and adding the value to the attribute inside the square brackets. Note that there is no space between the HTML element type and the opening square bracket of the attribute.

a[href="https://www.google.com"]{
    color: blue;
}

You can also select elements based on the relationship between them. Chaining selectors is the “AND” select and applies to elements that meet all the criteria. The syntax is a period (.) between the selectors with no spacing. For instance if you had a rule that gave all elements with the class of green-text the colour of green, but you also want any level 2 heading with the colour of green-text to have a 23pt font size you would create a rule like:

h2.green-text {
    font-size: 23pt;
}

Use multiple selectors for an “OR” selection and applies to all of the selectors. The syntax is to have a comma and a space between each selector.

h1, h2, p {
    color: green;
}

A cleaner variation of the above would be to put each selector on a new line.

h1,
h2,
p {
    color: green;
}

Child selectors target specific elements that are the child elements of others by using a greater than (>) between the selectors. This could be done with types such as all paragraph elements that are child elements of divs.

div > p {
    color: green;
}

Or with classes or IDs such as all divs that are children of the element with id "main_element".

#main_element > div {
    height: 200px;
}

Similarly you can select all descendants, not just children by just putting a space between the selectors. This example will target paragraph decendants of h1 elements even if they are nested inside other elements under the h1.

h1 p {
    color: green;
}

To target elements that are both the children of the same element (sibling elements) the syntax is first_selector~sibling. For example for all h2 siblings of a h1 element:

h1 ~ h2 {
    color: green;
}

You can also select only the next sibling when reading through the code. This can be done by using the + sign. The following would only target the next h2 element on the same layer as the h1 element:

h1 + h2 {
    color: green;
}

You can double up the element types to create a niche scenario where you want all but the first of the siblings to be targeted. The following would apply the rule to every div on the same level except the first div child on that level.

div ~ div {
    color: green;
}

Pseudo classes specify a certain state of the selected element, giving you a little bit of functionality. Having your cursor change to a hand when you move it over a link or seeing the colours and border of a button change for the split second you click it are examples of pseudo classes. They take the syntax of a colon and a value after the selector.

• :focus is used to set the style of an element when it is focused, be it by clicking it with a mouse, tabbing to it with the keyboard, or touching it with your finger on a touchscreen.

  button:focus {
      border: 1px solid black;
  }
  

• :active is used to set the style of an element when it is actively being clicked down on.

  button:active {
      background-color: blue;
  }
  

• :hover is used to style the element when the cursor is hovered over it.

  button:hover {
      cursor: pointer;
  }
  

I found understanding pseudo elements to be slightly confusing, but they are incredibly powerful. They are used to style specific parts of a HTML element without adding extra HTML. A easy case to understand is if you wanted to just style the first letter of a paragraph. Instead of wrapping that letter in a <span></span> element with a given ID or class and then using that ID or class selector to target it, you can just use p::first-letter. The syntax for pseudo elements is a double colon.

Inherit is value that a lot of CSS properties can take which essentially means just use the same rule as the parent elements. For example, a paragraph with the color property set to inherit will have the same font colour as its parent element.

#paragraph-example {
	color: inherit;
}