Explain CSS Basic Selectors

  1. Element Selector: Every element that is the same as the selector.

    Group Selector: All elements that are the same as the selectors in the group.

    Descendant Selector: All elements that match being elements inside of the previous element.

    Class Selector, dependent and independent: Whichever element that has that class assigned to it.

    ID Selector, dependent and independent: Whichever element that has that ID assigned to it.

    Universal Selector: Every element that would be displayed on that page.

    Pseudo Selectors: Whichever element that matches the element and also matches the qualifier statement such as :first-child.

    Pseudo Elements: They are wase to target certain aspects of an element. Such as before and after.

  2. Element Selector: If you want all elements of a specific type such as p elements to have the same font.

    Group Selector: If you want a bunch of elements to act the same way. Such as applying flex to many elements at once.

    Descendant Selector: If you want to style certain elements different than others. Such as only a section instead of the whole page.

    Class Selector, dependent and independent: If you would like to apply a certain styling selectively and repeatedly.

    ID Selector, dependent and independent: If you would like to apply a certain styling selectively and repeatedly.

    Universal Selector: I've used it to make it easier to see the dimensions of an element by putting a 1 pixel black border around all elements.

    Pseudo Selectors: If you would like to add a certain styling to a group of elements but not the last or a specific one you can use :last or "nth-of-type(n)

    Pseudo Elements: They are strange extra options used to target around or in the element.

  3. Element Selector: It will be the elements name with nothing before or after such as p or div.

    Group Selector: It will look like a grouping of elements as if they were a list in a sentence such as (p, body, div, img).

    Descendant Selector: It will be listed such as (body p), which will target all p elements inside of body.

    Class Selector, dependent and independent: It will be prefaced with a period before the class name. As an example if there is a class called container it would show up as (.container).

    ID Selector, dependent and independent: It will be prefaced with a hashtag before the class name. As an example if there is a class called container it would show up as (#container).

    Universal Selector: It will show up as * in CSS.

    Pseudo Selectors: They will show up with a colon behind the original selector.

    Pseudo Elements: They will show up with two colons behind the original selector.

  4. Universal Selector

    Element Selector

    Pseudo Elements

    Class Selector, dependent and independent

    ID Selector, dependent and independent

    Group Selector: Depends on what is included.

    Descendant Selector: Depends on what is included.

    Pseudo Selectors: Depends on what it's attached to.