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