Explain CSS Basic Selectors

Element Selector

• selects one specific element, like body or h1
• This is often used when you want to change all of that one element throughout your entire page, for example: if you select p {color: blue;} then all your paragraphs will be the color blue.
• element selectors have the lowest level of specificity.

Group Selector

• The group selector allows you to affect multiple different elements with the same style definition. This allows you to make a lot of changes and minimize code.
• An example of a group selector would be: p,h1,h2 {color:blue;} this will affect all the elements listed making all paragraphs, header 1 and header 2(s) blue.

Descendant Selector

• Descendant selectors will are used when you want to style an element that is located inside another element.
• An example of descendant selector would be: ul li {color:blue;} this will make your list element inside you unorganized list element blue.
• unlike group selectors, descendant selectors are not seperated with a comma.

Class Selector, dependent and independent

• A class selector is used when you want to style an element that has a specific class attribute. A dependent class selector can select certain html tags while independent class selectors can select any element that has that class attribute.
• This is used when you designate specific styles to a class and want to quickly apply them in defferent parts of your page.
• An example of independent class selectors would be: .blue {color:blue;} any element that has the class .blue will be colored blue. An example of a dependent class selector would be: p.blue {color:blue}; this would make it so that any paragraph with the class .blue would be blue.

ID Selector, dependent and independent

• An ID selector is similar to a class selector it is used to select a specific element with an ID.
• An ID seletor has both dependent and independent forms
• A hashtag or pound sign is used when selecting an id. Example: #blue {color:blue;}

Universal Selector

• A Universal selector does just what it says selects every element on the page.
• You use this selector when you want to style your entire page a certain way.
• An asterisk is what you use for this selector. Example: * {color:blue;}

Pseudo Selectors

• A pseudo selector is used to select an element that is in a particular state.
• This is used when an action has been performed on a particular element.
• A colon is used to identify this selector. Example a:visited {color:red;} when a link has been clicked on and explored the link will then change color to red to show that it has already been clicked on.

Pseudo Elements

• A Pseudo element is used when you want to style a particular part of an element.
• It can be used when you just want to style the first letter of line of an element.
• You use a double colon to use this selector. Example: p::first-line { color:blue;} this will make it so that the first line of the paragraph is blue.

Selectors and spicificity levels from lowest to highest.

• The levels of specificity from lowest to highest are as follows: Universal, Group, Element, Descendant, independent class, dependent class, Pseudo Selectors, Pseudo elements, and Id selectors.