Scribd
Upload
75 views

Css Selectors: A Super Important Part of CSS!

This document discusses CSS selectors and how they work. CSS selectors allow you to target specific elements on a page to style them. The basic pattern is the selector followed by opening and closing braces containing property-value pairs. Different types of selectors are listed, including element, class, ID, descendant, adjacent sibling, child, attribute, pseudo-class, and pseudo-element selectors. When multiple selectors apply to the same element, specificity determines which styles win based on the selector's level of specificity. Specificity is measured by counting IDs, classes, attributes, element names, and pseudo-classes.

Uploaded by

Armin Trumic
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
75 views

Css Selectors: A Super Important Part of CSS!

This document discusses CSS selectors and how they work. CSS selectors allow you to target specific elements on a page to style them. The basic pattern is the selector followed by opening and closing braces containing property-value pairs. Different types of selectors are listed, including element, class, ID, descendant, adjacent sibling, child, attribute, pseudo-class, and pseudo-element selectors. When multiple selectors apply to the same element, specificity determines which styles win based on the selector's level of specificity. Specificity is measured by counting IDs, classes, attributes, element names, and pseudo-classes.

Uploaded by

Armin Trumic
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

CSS SELECTORS

A SUPER IMPORTANT PART OF CSS!


CSS RULES
Everything you do in CSS
follows this basic pattern:

selector {
property: value;
}
CSS RULES
Everything you do in CSS
follows this basic pattern:

selector {
property: value;
}
CSS RULES
Make all <h1> elements purple

h1 {
color: purple;
}
FANCIER!
Select every other text input
and give it a red border:

input[type="text"]:nth-of-type(2n){
border:2px solid red;
}
UNIVERSAL SELECTOR
Select everything!

* {
color: black;
}
ELEMENT SELECTOR
Select all images

img {
width: 100px;
height: 200px;
}
SELECTOR LIST
Select all h1's and h2's

h1,h2 {
color: magenta;
}
CLASS SELECTOR
Select elements with class of 'complete'

.complete {
color: green;
}
ID SELECTOR
Select the element with id of 'logout'

#logout {
color: orange;
height: 200px;
}
DESCENDANT SELECTOR
Select all <a>'s that are nested inside an <li>

li a {
color: teal;
}
ADJACENT SELECTOR
Select only the paragraphs that are
immediately preceded by an <h1>

h1 + p {
color: red;
}
DIRECT CHILD
Select only the <li>'s that are direct
children of a <div> element

div > li {
color: white;
}
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 special state of the
selected element(s)
:active
:checked
:first
:first-child
:hover
:not()
:nth-child()
:nth-of-type()
PSEUDO ELEMENTS
Keyword added to a selector that lets
you style a particular part of
selected element(s)
::after
::before
::first-letter
::first-line
::selection
What happens when
conflicting styles
target the same
elements?
THE CASCADE
The order your styles are declared in
and linked to matters!

Purple wins!
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"
SPECIFICITY

Element Selector Element Selector


+ Element Selector
ID >
CLASS >
ELEMENT
0 0 2
ID Selectors Class,
Attribute, & Element and 
Pseudo-Class Pseudo-Element
Selectors Selectors
1 0 0
ID Selectors Class,
Attribute, & Element and 
Pseudo-Class Pseudo-Element
Selectors Selectors
0 1 2
ID Selectors Class,
Attribute, & Element and 
Pseudo-Class Pseudo-Element
Selectors Selectors
INLINE
STYLES

Inline Styles ID Selectors Class, Element and 


Attribute, & Pseudo-Element
Pseudo-Class Selectors
Selectors
INHERITANCE

You might also like