CSS Selectors
The element selector selects HTML elements based on what?
The element name
p::first-line { color: #ff0000; font-variant: small-caps; }
formats the first line of the text in all <p> elements
unique
id selectors are..
Pseudo-elements selectors
select and style a part of an element
Pseudo-class selectors
select elements based on a certain state
Combinator selectors
select elements based on a specific relationship between them
Simple selectors
select elements based on name, id, class
a[target] { background-color: yellow; }
selects all <a> elements with a target attribute
div p { background-color: yellow; }
selects all <p> elements inside <div> elements
div > p { background-color: yellow; }
selects all <p> elements that are children of a <div> element
Attribute selectors
selects elements based on an attribute or attribute value
div:hover { background-color: blue; }
the :hover pseudo-class on a <div> element
#para1 { text-align: center;color: red; }
the HTML element with id="para1"
h1, h2, p { text-align: center;color: red; }
the h1, h2, and p elements have the same style definitions
p:nth-child(odd) { background: red; } p:nth-child(even){ background: blue; }
two different background colors for odd and even p elements
p:nth-of-type(odd) { background: red; } p:nth-of-type(even) { background: blue; }
two different background colors for odd and even p elements
pseudo-classes (:) or pseudo-elements (::)
:: or :
matches every element that is the nth child, regardless of type, of its parent. n can be a number, a keyword, or a formula
:nth-child(n)
matches every element that is the nth child, of a particular type, of its parent. n can be a number, a keyword, or a formula
:nth-of-type(n) selector
a[target="_blank"] { background-color: yellow; }
<a> elements with a target="_blank" attribute
div + p { background-color: yellow; }
<p> element that are placed immediately after <div> elements
<p class="center large">This paragraph refers to two classes.</p>
<p> element will be styled according to class="center" and to class="large"
p.center { text-align: center;color: red; }
<p> elements with class="center" will be center-aligned
number
A class or id name cannot start with a________
used to select an element that is directly after another specific element
Adjacent Sibling Selector +
selects all the HTML elements with the same style definitions
CSS Grouping Selector
used to select elements with a specified attribute and value
CSS [attribute="value"] Selector
used to select elements with a specified attribute
CSS [attribute] Selector
used to style specified parts of an element
CSS pseudo-element
to "find" (or select) the HTML elements you want to style
CSS selectors are used for what?
writing phrases without spaces or punctuation, indicating the separation of words with a single capitalized letter
CamelCase
selects all elements that are the children of a specified element
Child Selector >
matches all elements that are descendants of a specified element
Descendant Selector
Simple selectors, Combinator selectors, Pseudo-class selectors, Pseudo-elements selectors, Attribute selectors
Five CSS Categories
selects all elements that are siblings of a specified element
General Sibling Selector ~
class (no id)
HTML elements can also refer to more than one _________
.center { text-align: center;color: red; }
HTML elements with class="center" will be red and center-aligned
combined
Pseudo elements can be __________
used to define a special state of an element
Pseudo-classes
True
Pseudo-classes are not case sensitive
block-level elements
The ::first-line pseudo-element can only be applied to what?
HTML elements with a specific class attribute
The class selector selects what?
the id attribute of an HTML element to select a specific element
The id selector uses what?
selector:pseudo-class { property:value; }
The syntax of pseudo-classes
selector::pseudo-element { property: value; }
The syntax of pseudo-elements
a hashtag #
To select an element with a specific id use ____________
period .
To select elements with a specific class write_________
*
Universal selector (in CSS up top)
HTML Elements
You can also specify that only specific what with classes?
a:link and a:visited
a:hover MUST come after what?
p { text-align: center;color: red; }
all <p> elements on the page will be center-aligned, with a red text color
div ~ p { background-color: yellow; }
all <p> elements that are siblings of <div> elements