Notes Reference CSS3

Float
Interactions

Spacing
Visability

Images
Tab

Selectors

CSS Selectors
Selector	Example	Description
Element	p	Selects every paragraph tag
ID	#elementId	Selects the element with an id="elementId"
Class	.elementClass	Selects all elements with a class="elementClass"
Attribute	input[type="text"]	Selects all input elements with a type attribute equal to text
Pseudo-class	a:hover	Selects the hover of all of the anchor elements
Nested	div p	Selects all <p> elements inside <div> elements
Child	div > p	Selects all <p> elements where the parent is a <div> element
Adjacent	div + p	The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.
General Sibling	div ~ p	Selects every <p> element that are preceded by a <div> element

Attribute Selectors

The following will select all <a> elements with a target attribute.

<a href="#">A regular link</a> <a href="#" target="_blank">A targeted link</a>

a[target] {background-color:yellow;}

A regular link
A targeted link

The following will select all <a> elements with a target attribute that is set to _blank.

a[target="_blank"] {background-color:#5555EE;color:#fff;}

Specific Within - [attribute~="value"]

By adding the tilde before the equal sign makes the selector select elements with an attribute value containing a specific word.
The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower":

This paragraph has a title of "flower". This paragraph has a title of "summer flower". This paragraph has a title of "doctor flower". This paragraph has a title of "flower new". This paragraph has a title of "my-flower". This paragraph has a title of "flowers". This paragraph has a title of "flower-shack".

p[title~="flower"] {background-color:#5555EE;color:#fff;}

This paragraph has a title of "flower".

This paragraph has a title of "summer flower".

This paragraph has a title of "doctor flower".

This paragraph has a title of "flower new".

This paragraph has a title of "my-flower".

This paragraph has a title of "flowers".

This paragraph has a title of "flower-shack".

Specific Front or Hyphenated- [attribute|="value"]

By adding the pipe or "or" sign before the equal sign makes the selector select elements with the specified attribute, whose value can be exactly the specified value, or the specified value followed by a hyphen (-).

The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like class="top-text".

This paragraph has a class of "top". This paragraph has a class of "top-gun". This paragraph has a class of "toppy". This paragraph has a class of "top-text". This paragraph has a class of "top-text-one". This paragraph has a class of "rolltop". This paragraph has a class of "roll-top".

p[class|="top"] {background-color:#EEEE00;color:#A33;}

This paragraph has a class of "top".

This paragraph has a class of "top-gun".

This paragraph has a class of "toppy".

This paragraph has a class of "top-text".

This paragraph has a class of "top-text-one".

This paragraph has a class of "rolltop".

This paragraph has a class of "roll-top".

Unspecific Starts - [attribute^="value"]

By adding the hat character before the equal sign makes the selector select elements with the specified attribute, whose value starts with the specified value.
The following example selects all elements with a class attribute value that starts with "req":

The value does not have to be a whole word!

This paragraph has a class of "req". This paragraph has a class of "req-gun". This paragraph has a class of "reqpy". This paragraph has a class of "req-text". This paragraph has a class of "req-text-one". This paragraph has a class of "rollreq". This paragraph has a class of "roll-req".

p[class^="req"] {background-color:#00EE00;color:#AA3;}

This paragraph has a class of "req".

This paragraph has a class of "req-gun".

This paragraph has a class of "reqpy".

This paragraph has a class of "req-text".

This paragraph has a class of "req-text-one".

This paragraph has a class of "rollreq".

This paragraph has a class of "roll-req".

Unspecific Ends - [attribute$="value"]

By adding a dollar sign, the selector select elements whose attribute value ends with a specified value.
The following example selects all elements with a class attribute value that ends with "bug":

The value does not have to be a whole word!

This paragraph has a class of "bug". This paragraph has a class of "bug-gun". This paragraph has a class of "bugpy". This paragraph has a class of "bug-text". This paragraph has a class of "bug-text-one". This paragraph has a class of "rollbug". This paragraph has a class of "roll-bug".

p[class$="bug"] {background-color:#FF5555;color:#922;}

This paragraph has a class of "bug".

This paragraph has a class of "bug-gun".

This paragraph has a class of "bugpy".

This paragraph has a class of "bug-text".

This paragraph has a class of "bug-text-one".

This paragraph has a class of "rollbug".

This paragraph has a class of "roll-bug".

Unspecific Wildcard - [attribute*="value"]

By adding an asterisk sign, the selector select elements whose attribute value contains a specified value.
The following example selects all elements with a class attribute value that contains "cup":

The value does not have to be a whole word!

This paragraph has a class of "cup". This paragraph has a class of "cup-gun". This paragraph has a class of "cuppy". This paragraph has a class of "cup-text". This paragraph has a class of "cup-text-one". This paragraph has a class of "rollcup". This paragraph has a class of "roll-cup". This paragraph has a class of "roll-cop".

p[class*="cup"] {background-color:#7777FF;color:#229;}

This paragraph has a class of "cup".

This paragraph has a class of "cup-gun".

This paragraph has a class of "cuppy".

This paragraph has a class of "cup-text".

This paragraph has a class of "cup-text-one".

This paragraph has a class of "rollcup".

This paragraph has a class of "roll-cup".

This paragraph has a class of "roll-cop".

Combinators

Combinators are elements that are in some type of sequence, whether following or nested.

Nested

<div class="tdiv1"> Some text in a paragraph with the class tpg1 whose parent in a div with the class tdiv1. Some more text in a paragraph with the class tpg1 whose parent in a div with the class tdiv1. Some text in a paragraph with the class tpgz1 whose parent in a div with the class tdiv1. Some text in a paragraph with no class set whose parent in a div with the class tdiv1. <h5>The following is in a class-less imbedded div</h5> <div> Some text in a paragraph with the class tpg1 whose parent in a div with no class set. Some more text in a paragraph with the class tpg1 whose parent in a div with no class set. Some text in a paragraph with the class tpgz1 whose parent in a div with no class set. Some text in a paragraph with no class set whose parent in a div with no class set. </div> </div>

div.tdiv1 p.tpg1 {background-color:#7777FF;color:#229;}

Some text in a paragraph with the class tpg1 whose parent in a div with the class tdiv1.

Some more text in a paragraph with the class tpg1 whose parent in a div with the class tdiv1.

Some text in a paragraph with the class tpgz1 whose parent in a div with the class tdiv1.

Some text in a paragraph with no class set whose parent in a div with the class tdiv1.

The following is in a class-less imbedded div

Some text in a paragraph with the class tpg1 whose parent in a div with no class set.

Some more text in a paragraph with the class tpg1 whose parent in a div with no class set.

Some text in a paragraph with the class tpgz1 whose parent in a div with no class set.

Some text in a paragraph with no class set whose parent in a div with no class set.

Child

Note that the only paragraph affected are the paragraphs one level down from the parent.

<div class="tdiv2"> Some text in a paragraph with the class tpg2 whose parent in a div with the class tdiv2. Some more text in a paragraph with the class tpg2 whose parent in a div with the class tdiv2. Some text in a paragraph with the class tpgz1 whose parent in a div with the class tdiv2. Some text in a paragraph with no class set whose parent in a div with the class tdiv2. Some more text in a paragraph with the class tpg2 whose parent in a div with the class tdiv2. <h5>The following is in a class-less imbedded div</h5> <div> Some text in a paragraph with the class tpg2 whose parent in a div with no class set. Some more text in a paragraph with the class tpg2 whose parent in a div with no class set. Some text in a paragraph with the class tpgz1 whose parent in a div with no class set. Some text in a paragraph with no class set whose parent in a div with no class set. </div> </div>

div.tdiv2 > p.tpg2 {background-color:#7777FF;color:#229;}

Some text in a paragraph with the class tpg2 whose parent in a div with the class tdiv2.

Some more text in a paragraph with the class tpg2 whose parent in a div with the class tdiv2.

Some text in a paragraph with the class tpgz1 whose parent in a div with the class tdiv2.

Some more text in a paragraph with the class tpg2 whose parent in a div with the class tdiv2.

Some text in a paragraph with no class set whose parent in a div with the class tdiv2.

The following is in a class-less imbedded div

Some text in a paragraph with the class tpg2 whose parent in a div with no class set.

Some more text in a paragraph with the class tpg2 whose parent in a div with no class set.

Some text in a paragraph with the class tpgz1 whose parent in a div with no class set.

Some text in a paragraph with no class set whose parent in a div with no class set.

Adjacent

The only paragraph affected is the paragraphs at the bottom where the paragraph is not embeddded, but immediately follows the div.

<div class="tdiv3"> Some text in a paragraph with the class tpg3 whose parent in a div with the class tdiv3. Some more text in a paragraph with the class tpg3 whose parent in a div with the class tdiv3. Some text in a paragraph with the class tpgz1 whose parent in a div with the class tdiv3. Some text in a paragraph with no class set whose parent in a div with the class tdiv3. Some more text in a paragraph with the class tpg3 whose parent in a div with the class tdiv3. <h5>The following is in a class-less imbedded div</h5> <div> Some text in a paragraph with the class tpg3 whose parent in a div with no class set. Some more text in a paragraph with the class tpg3 whose parent in a div with no class set. Some text in a paragraph with the class tpgz1 whose parent in a div with no class set. Some text in a paragraph with no class set whose parent in a div with no class set. </div> </div> <div class="tdiv3"> Just a paragraph inside of the div with a class of tdiv3. </div> Some text in a paragraph with the class tpg3 that immediately follows a div with the class tdiv3. Note that it is not embedded in the div, but follows it. Some text in a paragraph with the class tpg3 that immediately follows a paragraph class tpg3.

div.tdiv3 + p.tpg3 {background-color:#7777FF;color:#229;}

Some text in a paragraph with the class tpg3 whose parent in a div with the class tdiv3.

Some more text in a paragraph with the class tpg3 whose parent in a div with the class tdiv3.

Some text in a paragraph with the class tpgz1 whose parent in a div with the class tdiv3.

Some more text in a paragraph with the class tpg3 whose parent in a div with the class tdiv3.

Some text in a paragraph with no class set whose parent in a div with the class tdiv3.

The following is in a class-less imbedded div

Some text in a paragraph with the class tpg3 whose parent in a div with no class set.

Some more text in a paragraph with the class tpg3 whose parent in a div with no class set.

Some text in a paragraph with the class tpgz1 whose parent in a div with no class set.

Some text in a paragraph with no class set whose parent in a div with no class set.

Just a paragraph inside of the div with a class of tdiv3.

Some text in a paragraph with the class tpg3 that immediately follows a div with the class tdiv3. Note that it is not embedded in the div, but follows it.

Some text in a paragraph with the class tpg3 that immediately follows a paragraph class tpg3.

General Sibling

The only paragraph affected are the paragraphs one level down from the parent.

<div class="tdiv4"> Some text in a paragraph with the class tpg4 whose parent in a div with the class tdiv4. Some more text in a paragraph with the class tpg4 whose parent in a div with the class tdiv4. Some text in a paragraph with the class tpgz1 whose parent in a div with the class tdiv4. Some text in a paragraph with no class set whose parent in a div with the class tdiv4. Some more text in a paragraph with the class tpg4 whose parent in a div with the class tdiv4. <h5>The following is in a class-less imbedded div</h5> <div> Some text in a paragraph with the class tpg4 whose parent in a div with no class set. Some more text in a paragraph with the class tpg4 whose parent in a div with no class set. Some text in a paragraph with the class tpgz1 whose parent in a div with no class set. Some text in a paragraph with no class set whose parent in a div with no class set. </div> </div> <div class="tdiv4"> Just a paragraph inside of the div with a class of tdiv4. </div> Some text in a paragraph with the class tpg4 that immediately follows a div with the class tdiv4. Note that it is not embedded in the div, but follows it. Some text in a paragraph with the class tpg3 that immediately follows a paragraph class tpg4.

div.tdiv4 ~ p.tpg4 {background-color:#7777FF;color:#229;}

Some text in a paragraph with the class tpg4 whose parent in a div with the class tdiv4.

Some more text in a paragraph with the class tpg4 whose parent in a div with the class tdiv4.

Some text in a paragraph with the class tpgz1 whose parent in a div with the class tdiv4.

Some more text in a paragraph with the class tpg4 whose parent in a div with the class tdiv4.

Some text in a paragraph with no class set whose parent in a div with the class tdiv4.

The following is in a class-less imbedded div

Some text in a paragraph with the class tpg4 whose parent in a div with no class set.

Some more text in a paragraph with the class tpg4 whose parent in a div with no class set.

Some text in a paragraph with the class tpgz1 whose parent in a div with no class set.

Some text in a paragraph with no class set whose parent in a div with no class set.

Just a paragraph inside of the div with a class of tdiv4.

Some text in a paragraph with the class tpg3 that immediately follows a div with the class tdiv4. Note that it is not embedded in the div, but follows it.

Some text in a paragraph with the class tpg3 that immediately follows a paragraph class tpg4.

Pseudo-Class Selectors

:active
:any-link
:autofill
:checked
:default
:defined
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:focus

:focus-visible
:focus-within
:fullscreen
:has()
:host
:host-context()
:host()
:hover
:in-range
:indeterminate
:invalid
:is()
:lang()
:last-child

:last-of-type
:left
:link
:modal
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type
:nth-of-type
:only-child
:only-of-type
:optional
:out-of-range
:paused

:picture-in-picture
:placeholder-shown
:playing
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited
:where()

Pseudo-Element Selectors

::after (:after)
::backdrop
::before (:before)
::cue

::cue-region
::file-selector-button
::first-letter

::first-line
::marker
::part

::placeholder
::selection
::slotted

Example of myBox Span