I used the CSS id selector to select this list item and change the text color to blue.
The CSS id selector uses an unique id to select a specific element by placing the #infront of the element name.
Example Code:
HTML:
<li id="li1"> </li>CSS:
#li1 {For the h1 tag which is the heading above, I used the element selector.
The CSS element selector uses the element name to select every instance of a tag, so you can style them together.
Example Code:
HTML:
<h1>CSS Selectors Demo</h1>CSS:
h1 {I used a CSS class selector to select the unordered list with a class name of ul1.
I then styled the unordered list with no decoration to remove the bullets in front of each list item.
The class seletor is used with a "." in front of the class name to select all elements with the same class name.
Example Code:
HTML:
<ul class="ul1"></ul>CSS:
.ul1 {I used the CSS :not selector to select everything that is not an ul,a,li or and h1 tag .
I style the text color of everything that is not one of those tags to green.
Example Code:
HTML:
<ul><li> </li></ul>CSS:
:not(ul,li,h1,a) {Paragraph 1
Paragraph 2
Paragraph 3
I used the ::after selector to select the p tags and to add text after them.
The ::after selector inserts something after the content of each selected element(s).
You use the content property to specify the content to insert.
Example Code:
HTML:
<li><p class="demo">Paragraph 1</p>CSS:
.demo::after {Paragraph 1
Paragraph 2
Paragraph 3
I used the ::before selector to select the p tags with a class demo2 and to add text before them.
The ::before selector inserts something before the content of each selected element(s).
like ::after you also use the content property to specify the content to insert.
Example Code:
HTML:
<li><p class="demo2">Paragraph 1</p>CSS:
.demo2::before {I used the :hover selector to style the link at the top of the page.
When you hover your mouse cursor over the link it turns yellow.
Not only does this give a cool color change effect but it lets the user know they are on the link.
Example Code:
HTML:
<ul id="navhome">CSS:
#home:hover {Paragraph 1
Paragraph 2
Paragraph 3
The :first-of-type selector lets you select the first element type of all parent elements in the page.
I used the :first-of-type selector on the first p tags with the demo3 with a blue underline.
If I had used the just the p tag instead it would have styled all of the first p tags of every parent in the page.
Example Code:
HTML:
<li> <p class="demo3">Paragraph 1</p> <p class="demo3">Paragraph 1</p> <p class="demo3">Paragraph 1</p> </li>CSS:
Paragraph 1
Paragraph 2
Paragraph 3
The :nth-child(n) Selector allows you to select every element that is in a certain position of it parent.
I styled the 2nd p element with class demo4 color to orange
This selector is similar to the first-of-typr selector that it would have selected the 2nd p tag of all parents in the page had I not picked the class type.
Example Code:
HTML:
<li>CSS:
.demo4:nth-child(2){The :root selector allows you to select the highest-level parenet elment in the DOM.
I did a simple style a red border top the entire page but I could have changed the enitre background color of the page.
Example Code:
HTML:
No HTML required
CSS:
:root{For the last 2 selectors i chose to combine the universal selector and the ::first-letter selector.
The universal selector lets you choose every element
By now I bet you can guess what the ::first letter selector does, it selects the first letter of an element type.
So by combining them I can choose the first letter of every element and style them.
I styled the first letters to be yellow, Itallic and
Example Code:
HTML:
All HTML elements on the page that have text. Does not effect my h3 tags there are spans at the front of them
CSS:
*:first-letter{