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.