Final Exam Project Part 2

selector type: element

examples:

h2 {font-size 16px;}

p { text-align: center; color: red; }

selector type: class

examples:

.center {text-align: left;},

.front {color: black;}

selector type: ID

examples:

#name {color:green;}

#h1 {color: blue;}

selector type: universal

examples:

* {text-align: left;}

* { text-align: center; color: blue; }

selector type: Multiple

examples:

h1 h2 h3 {text-align: center;},

p span {color: purple;}

selector type: Pseudo-class

examples:

button:hover {color: red;}

tr:only-child {align: center;}

selector type: Pseudo-element

examples:

:first-child::first-line {font-weight: 400;}

p::first-line {text-transform: upper-case;}

selector type: Attribute

examples:

h1[rel="external"] { color: red; }

input[type="text"] { padding: 3px; }

selector type: Combinator

examples:

h1[rel="external"] { color: red; }

ul > li {border-top: 5px solid red;}

Pseudo-Element Selectors

examples:

::first-letter

Adds a special style to the first letter of a text.

Pseudo-Element Selectors

examples:

::before

Insert some content before.

Pseudo-Element Selectors

examples:

:::after

Insert content after an element.

Pseudo-Element Selectors

examples:

::marker

Insert content after an element.

Pseudo-Element Selectors

examples:

::selection

Matches portion of element selected.

Pseudo-Element Selectors

examples:

::first-line

Selects the first line of each element.

Pseudo-Element Selectors

examples:

::grammar-error

Matches grammar error as flagged by browser.

Pseudo-Element Selectors

examples:

::spelling-error

Matches spelling error as flagged by browser.

Pseudo-Class Selectors

examples:

:dir

Selects an element based on its directionality.

Pseudo-Class Selectors

examples:

::lang/p>

>Select an element based on its content language.

Pseudo-Class Selectors

examples:

:any-link

Matches either :link or :visited

Pseudo-Class Selectors

examples:

:link

Matches links that have not yet been visited

Pseudo-Class Selectors

examples:

:local-link

Matches the target URL.

Pseudo-Class Selectors

examples:

:target

of Matches the document URL.

Pseudo-Class Selectors

examples:

:target-within

Matches elements which are the target of the document URL.

Pseudo-Class Selectors

examples:

:scope

Represents elements that are a reference point for selectors .

Pseudo-Class Selectors

examples:

:hover

Matches when a user designates an item with a pointing device.

Pseudo-Class Selectors

examples:

::active

Matches when an item is being activated by the user.

Pseudo-Class Selectors

examples:

:focus

Matches when an element has focus.

Pseudo-Class Selectors

examples:

:focus-visible

Matches when the element should be visibly focused.

Pseudo-Class Selectors

examples:

:focus-within

Matches an element to which :focus applies.

Pseudo-Class Selectors

examples:

:current

Represents the element or ancestor of the element that is being displayed.

Pseudo-Class Selectors

examples:

::past

Represents an element that occurs before the :current element.

Pseudo-Class Selectors

examples:

:future

Represents an element that occurs after the :current element

Pseudo-Class Selectors

examples:

:playing

Represents a media element when that element is playing.

Pseudo-Class Selectors

examples:

:paused

Represents a media when that element is paused.

Pseudo-Class Selectors

Pseudo-Class Selectors

:autofill

when an input has been auto-filled .

Pseudo-Class Selectors

examples:

:enabled

Represents an element that is in an enabled state.

Combinator Selectors

examples:

Whitespace

Indicates that the second selector must be a descendant of the first selector

Combinator Selectors

examples:

Asterisk [*]

Represents a Grandchild or later.

Combinator Selectors

examples:

Greater-than [>]

When the second selector must be a child of the first selector.

Combinator Selectors

examples:

Plus [+]

Represents Next-sibling

Combinator Selectors

examples:

Tilde [~]

Represents the Subsequent-sibling;

Attribute Selectors

examples:

h2[title]

Attribute Only Match.

Attribute Selectors

examples:

[att=val]

Targets an element where the attribute value is exact.

Attribute Selectors

examples:

[att|=val]

Matches attribute value is exactly "val" or starts with "val".

Attribute Selectors

examples:

[att^=val]

Start With Match. Requires caret symbol.

Attribute Selectors

examples:

[att$=val]

Ends With Match.

Attribute Selectors

examples:

[att~=val]

List Match.

Attribute Selectors

examples:

[att*=val]

Contains Match.