WDV 205 - Advanced CSS

Assignment 1-2 Basic CSS Selectors

Element Selector

  1. The first part of defining a CSS rule. It can be any element because it is the term used to describe which element the CSS rule should apply to.
  2. Use the element selector whenever you wish to style an element.
  3. The basic layout of a CSS rule:

    element {
    CSS declarations
    }

Universal Selector

  1. Chooses all the HTML elements on a page.
  2. Use the universal selector when you have a very general rule you wish to apply to the whole page, such as a background color or if you want to align everything a certain way.
  3. An * is the symbol, so it would look like:

    * {
    CSS declarations
    }

Group Selector

  1. Chooses multiple elements at the same time.
  2. Use the group selector when you have a rule that you want to apply to serval different elements.
  3. When the elements are grouped, they will have commas in between them like so:

    h1, h2, h3 {
    CSS declarations
    }

Pseudo Selectors

  1. In general, they can style a specific characteristic or part of an element. There are two types, pseudo class and pseudo element.
  2. For the most part, I've seen them used on elements to make the links look different than just a plain hyperlink.
  3. A very common example in my own work:

    a:hover {
    color: red;
    }

    Makes the link red when you mouse over it.

Pseudo Elements

  1. Can style specific parts of an element.
  2. Used when you want to target the first letter or first line of an element. It can also be used to insert content before/after certain elements.
  3. To differentiate it from the pseudo class, pseudo elements use ::

    p::first-line {
    color: red;
    }

    Makes the first line of paragraph elements red.

Descendant Selector

  1. Chooses elements that are nested within other elements.
  2. Use when you want to target certain elements, but not necessarily all of the same type of elements. For example, you only want to target the p elements that are nested in div elements, and ignore the p elements outside of the div elements.
  3. To denote a descendent, there is only a space between the elements:

    div p {
    color: red;
    }

    Makes all of the p elements within a div red.

Class Selector, Dependent and Independent

  1. Defines CSS rules for elements that have that class assigned to them. Independent means that they stand alone and can apply to any element with that class. Dependent means that they are assigned to a specific element, and only those elements that have that class designation will take on those characteristics.
  2. Used when you want to write a CSS rule that you can apply to a variety of situations and elements. Since it is more specific, it can also override less specific rules, such as any applied by the previous selectors.
  3. Define a class by starting with a period and then naming it:

    .className {
    color: red;
    }

    Makes the element with the class name className the color red.

ID Selector, Dependent and Independent

  1. Basically the same definition as a class; however, IDs are usually unique to one element so that they can be targeted by more than just the CSS (usually JavaScript).
  2. It can be used to override even a class CSS rule, and it is also used to target the specific element by other languages such as JavaScript.
  3. The # is used instead of a period:

    #idName {
    color: red;
    }

    Makes the element with the id name idName the color red. It also allows the element to be found and targeted with JavaScript commands.