2.1 Selectors Flashcards
type/element selector
matches element name
a { }
Universal Selector
Applies to all elements in the document
- { }
Class selectors
Matches an element with the same class attribute
.note { }
targets all elements with this class
p.note { }
targets only p tags with the specified class
ID selector
introduction { }
Matches element with the id
Child Selector
Matches an element that is a direct child of another
li>a { }
Targets any a elements that are children of li tags (but not other a tags)
Descendent Selector
Matches an element that is a descendent of another specified element (not just a direct child of an element)
p a { }
Adjacent Sibling
h1+p { }
Matches an element that is the next sibling of another
Targets the first p tag after any h1 tag
General Sibling selector
h1~p { }
Matches an element that is sibling of another, although it does not have to be directly preceding element
important
Overirdes all css. Always at end of rule.
p {
color: blue !important;
}
hover pseudo selector
a:hover
active pseudo selector
a:active
focus pseudo selector
input:focus
existence attribute selector
Matches a specific attrbute
[ ]
p[class]
equality attribute selector
Matches a specific attribute with a specific value
[=]
p[class=”dog”]
Space attribute selector
Matches a specific attribute whose value appears in a space separated list of words
p[class~=”dog”]