-Universal and Element Selectors
-The ID Selector
-The Class Selector
-The Descendent Selector
-The Adjacent and Direct-Descendent Selectors
-The Attribute Selector
-Pseudo Classes
-Pseudo Elements
-The CSS Cascade
-What is Specificity
-Inline Styles and Important
###Universal and Element Selectors
CSS Syntax
selector {
property: value;
}
h1 {
color: purple;
}
-* selects everything on page
There are a variety of ways to select items on a page to customize. ID can only be applied to one item on a page.
The ID Selector
To select an item by its ID, use the # symbol followed by the ID HTML attribute.
logout {
color: orange;
height: 200px;
}
The Class Selector
To select an item by its class, use the . symbol followed by the class name. Class can be applied to multiple items on a page. It is common to have groups of classes.
.complete {
color: green;
}
The Descendent Selector
The descendent selector makes it possible to style nested HTML elements.
li a {
color: teal;
}
The selector will style all the a tags within a list.
The Adjacent and Direct-Descendent Selectors
The Adjacent Selector
will select only the paragraphs that are immediately preceded by an h1.
h1 + p {
color: red;
}
- is known as the adjacent combinator, it functions by selecting the paragraphs that are immediately preceded by an h1, or paragraphs that come right after an h1 on the same level.
They are not children or parents and are not nested in anyway. It is just one after the other.
Direct Child Selector
Select only the li that are direct children of a div element.
div > li {
color: white;
}
The Attribute Selector
Select all input elements where the type attribute is set to "text"
input [type= "text"] {
width: 300px;
color: yellow;
}
Pseudo Classes
Keyword added to a selector that specifies a specials state of the selected elements.
-:active
-:checked
-:first
-:first-child
-:hover
-:not()
-:nth-child()
-:nth-of-type()
:active
a:active {
color: red;
}
represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.
:checked
:checked {
margin-left: 25px;
border: 1px solid blue;
}
selector represents any radio input type="radio", checkbox input type="checkbox", or option option in a select element that is checked or toggled to an on state.
:first
@page :first {
margin-left: 50%;
margin-top: 50%;
}
used with the @page at-rule, represents the first page of a printed document.
:first-child
p:first-child {
color: lime;
}
represents the first element among a group of sibling elements.
:hover
a:hover {
color: orange;
}
matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).
:not()
:not(p) {
color: blue;
}
represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.
:nth-child()
li:nth-child(2) {
color: lime;
}
:nth-child(4n) {
color: lime;
}
matches elements based on their position in a group of siblings.
:nth-of-type()
p:nth-of-type(4n) {
color: lime;
}
matches elements of a given type (tag name), based on their position among a group of siblings.
Information
from
https://developer.mozilla.org/en-US/
Pseudo Elements
Keyword added to a selector that lets you style a particular part of selected elements.
::after
a::after {
content: "→";
}
creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
::before
a::before {
content: "♥";
}
creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
::first-letter
p::first-letter {
font-size: 130%;
}
applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).
::first-line
p::first-line {
color: red;
}
applies styles to the first line of a block-level element. Note that the length of the first line depends on many factors, including the width of the element, the width of the document, and the font size of the text.
::selection
::selection {
background-color: cyan;
}
applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).
Information
from
https://developer.mozilla.org/en-US/
The CSS Cascade
The order matters and the order that things are encountered in is going to be reflected in what you
see in the browser.
What is Specificity
What happens when conflicting styles target the same elements?
Well it comes down to the order within the cascade.
Specificity
Specificity is how the browser decides which rules to apply when multiple rules could apply to the same element.
It is a measure of how specific a given selector is. The more specific selector "wins".
Inline Styles and Important
The first inline styles, are more specific than IDs, classes and elements.
The general rule is to avoid inline styles, because they are confusing and may cause unnecessary conflicting.
important
The important rule is something that we can use on individual declarations, it is generally something to avoid as well.
Top comments (0)