Demo's
12 CSS Selectors for Your Next Web Development Project
What are CSS selectors?
CSS selectors are used by web developers who want to select an element of their html code to add style to it. There are a number of different types of selectors that perform different actions. in this section I will discribe to you a few different types. On this page I will be demonstration 12 diffent types of CSS selectors you may choose to use on your next Web development project.
Universal Selector
The universal selector is used to apply the style to all elements in the document. This can be used
at the top of the document to set a style that will be used universally throughout the entire document.
in this current document I have the CSS reset rule set to * {
margin: 0; padding: 0; border:0; box-sizing: border-box;
} This applies to the entire document a margin of 0, padding of 0, border of 0, and sets box sizing to border-box.
This rule will be applied to all elements until a more specific rule for an element is created.
Type Selector
A type selector will apply a specific style rule to only targeted elements in an HTML document. This set of rules
will apply to all instances of that type until something more specific is created.
Ex. h2{color:red} will apply the color red to sll h2 elements.
Class Selector
The Class selector is used to match elements that have the same value specified in the class attribute section of a
element.
ex. html code: h3 class="title"> /h3
ex css code: .title{color:red}
ID Selector
The Id selector matches all elements whose ID attribute has the same value. In CSS the Hash symbol # is used to
identify the ID value.
ex HTML code: p id="introduction"> /p
ex css code: .introduction{font-size:40px}
Child Selector
A child selector will select an element that is a direct child of another element an no other instances of that element will be selected.
The following list shows the child selctor ol > p which is applied to all p elements whos parent is a ol ol>p{
color:orange;}
- Parent
- Parent
child
child
Descendant Selector
The descendant selector matches the selected element only if it is a descendent of the targeted element. In the example only
the a element that is inside of a p element is selected.
ex. p a {color:blue:;}
Existence Attribute Selector
Selects only elements that have specified attribute. The example will select p elements with attribute class.
ex. p[class]
Equality Attribute Selector
Will only selects specific attributes with a specific value. The example will select h3 elements with class value set to 'title'
ex. h3[class="title"]
Hover Pseudo Class Selector
This is applied to the end of a selected element to add the selected effect whenever the user hovers over the element with a cursor.
ex. Hover Here!
Ex code: #testLink:hover{
color:blue;
font-size: 1.9rem;
}
Visited Pseudo Class Selector
This pseudo selector applies to link elements and applies the selected style when the link has been visted.
ex. Click Me!
Ex code: #testLinkVisit:visited{
color:hotpink;
}
To view Examples of Hamburger menu click the link below
Click Me to go to hamburger menu