CSS Selectors

CSS Selectors, multiple & combined selectors

selector

Example:  Applying styles to single selector

p {background-color: red;}

Applies the style to all <p> elements

selector, selector

Example:  Applying styles to multiple selector

p, h2, #header, .round {background-color: red;}

Applies the style to all <p> elements, <h2> elements, all IDs with name of header & all classes with name of round

The name of an ID selector must have a suffix of # (the hash symbol)
The name of an class selector must have a suffix of . (the full stop symbol)
• Additional selectors can added seperated with a comma or a comma & space. e.g.

element, selector, element, selector

Example applying styles to multiple elements of classes

Applies the style to the listed elements: all <div> elements and all <h2> elements

div, h2 {background-color: yellow;}

selector selector

Example

div h2 {background-color: yellow;}

Applies the style to all h2 Elements if they are inside the <div>

selector > selector

Example

Applies the style to the child selector if it inside the first selector

CSS

div > p {background-color: red}

HTML

<p>No Styling</p>
<div>
 	<p>I am a child of div & styled</p>
 			<table width="20" border="1">
      <tr>
         <td><p>I am a child of td No Styling</p></td>
      </tr>
     </table>
     <p>I am a child of div & styled</p>
 </div>
 <p>I am not inside the div No Styling</p>

Applies the style to the <p> child selectorif it inside the <div> element

.class

A class can be used multiple times and applied to the same or different opening tags in various positions throughout the HTML page

 

 

Examples - A few useful classes to start you off

CSS

.border {border: 1px solid #000;}
.col3 {-webkit-column-gap: 1em; -moz-column-gap: 1em; column-gap: 1em; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3;}
.img-responsive {display:block; max-width:100%; height:auto }
.rounded {border-radius:6px }
.text-left {text-align:left }
.text-right {text-align:right }
.text-center {text-align:center }

.border {border: 1px solid #000;}

.col3 {-webkit-column-gap: 1em; -moz-column-gap: 1em; column-gap: 1em; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3;}

.img-responsive {display:block; max-width:100%; height:auto }

.rounded {border-radius:6px }

Rounds the corners of the element, which must either have a border and / or a background-color

.text-left {text-align:left }

Aligns the text to the left. Because left is the default alignment this class is usually not required

.text-right {text-align:right }

.Aligns the text to the left.

text-center {text-align:center }

.Aligns the text to the centre

#id

*

The * symbol affects EVERY single element on the page

Example using * symbol

* {margin: 0;  padding: 0;}

Removes all margins & all padding on the page

Example using * symbol

div * {background-color:red;}

Selects all elements inside <div> elements and sets their background color to red

element + element

Example

div + p {background-color:red;}

Selects all s that immediatly follow a

element ~ element

Example

div ~ p {background-color:red;}

Selects every <p> element that are preceded by a <div> element

Styling an elements [attribute]

Example

a[title] {color: green;}

Selects all <a> elements with a title attribute

[target]

Selects all elements with a target attribute

[attribute=value] [target=_blank] Selects all elements with target="_blank"

[attribute~=value]

[title~=flower] Selects all elements with a title attribute containing the word "flower"

[attribute|=value]

[lang|=en] Selects all elements with a lang attribute value starting with "en"

[attribute^=value]

a[href^="https"]

Selects every <a> element whose href attribute value begins with "https"

[attribute$=value]

a[href$=".pdf"]

Selects every <a> element whose href attribute value ends with ".pdf"

[attribute*=value]

a[href*="w3schools"]

Selects every <a> element whose href attribute value contains the substring "w3schools"

:active a:active

Selects the active link

::after

p::after

Insert something after the content of each <p> element

::before

p::before Insert something before the content of each <p> element

:checked

input:checked Selects every checked <input> element

:disabled

input:disabled

Selects every disabled <input> element

:empty

p:empty

Selects every <p> element that has no children (including text nodes)

:enabled

input:enabled

Selects every enabled <input> element

:first-child

p:first-child

Selects every <p> element that is the first child of its parent

::first-letter

p::first-letter

Selects the first letter of every <p> element

::first-line

p::first-line

Selects the first line of every <p> element

:first-of-type

p:first-of-type

Selects every <p> element that is the first <p> element of its parent

:focus

input:focus

Selects the input element which has focus

:hover

a:hover

Selects links on mouse over

:in-range

input:in-range

Selects input elements with a value within a specified range

:invalid

input:invalid

Selects all input elements with an invalid value

:lang(language)

p:lang(it)

Selects every <p> element with a lang attribute equal to "it" (Italian)

:last-child

p:last-child

Selects every <p> element that is the last child of its parent

:last-of-type

p:last-of-type

Selects every <p> element that is the last <p> element of its parent

:link

a:link

Selects all unvisited links

:not(selector)

:not(p) Selects every element that is not a <p> element

:nth-child(n)

p:nth-child(2)

Selects every <p> element that is the second child of its parent

:nth-last-child(n)

p:nth-last-child(2)

Selects every <p> element that is the second child of its parent, counting from the last child

:nth-last-of-type(n)

p:nth-last-of-type(2)

Selects every <p> element that is the second <p> element of its parent, counting from the last child

:nth-of-type(n)

p:nth-of-type(2)

Selects every <p> element that is the second <p> element of its parent

:only-of-type

p:only-of-type

Selects every <p> element that is the only <p> element of its parent

:only-child

p:only-child Selects every <p> element that is the only child of its parent

:optional

input:optional Selects input elements with no "required" attribute

:out-of-range

input:out-of-range

Selects input elements with a value outside a specified range

:read-only

input:read-only

Selects input elements with the "readonly" attribute specified

:read-write

input:read-write Selects input elements with the "readonly" attribute NOT specified

:required

input:required

Selects input elements with the "required" attribute specified

:root

:root Selects the document's root element

::selection

::selection

Selects the portion of an element that is selected by a user

:target

#news:target

Selects the current active #news element (clicked on a URL containing that anchor name)

:valid

input:valid

Selects all input elements with a valid value

:visited

a:visited Selects all visited links

Complicated Selectors

Note: There are more complicated selectors avaiable that are more advanced in there use

Mystified by a strange selector & you want to find out what a selector will select & style then input the CSS into this site

SelectOracle