CSS selectors

CSS selectors
 
CSS selectors
  • Currently 4.5 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 4.5/5 (5 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


In CSS, templates of selectors are used to select element(s) which you want to style.

The "CSS" column shows in which CSS version the property is defined (CSS1, CSS2 or CSS3).

Selector

Example

Explanation

CSS

.class

.description

All elements with class = "description"

1

#id

#yourname

Element with id = "yourname"

1

*

*

All the elements

2

element

p

All <p> elements

1

element,element

div,p

All <div> and <p> elements

1

element element

div p

All elements <p> inside <div>

1

element>element

div>p

All elements <p> where <div> is parent element

2

element+element

div+p

All <p> elements placed right after the element <div>

2

[attribute]

[target]

All elements with attribute target

2

[attribute=value]

[target=_blank]

All elements with attribute target with value "_blank"

2

[attribute~=value]

[title=apple]

All elements with attribute title, which includes words separated by space, one of which is "apple"

2

[attribute|=language]

[lang|=en]

All elements where the value of the attribute lang is "en", even if the value contains a dash (-) as in "en-us"

2

:link

a:link

All links (|<a> elements with href)

1

:visited

a:visited

All visited links

1

:active

a:active

Active links

1

:hover

a:hover

Links hovered over with mouse

1

:focus

input:focus

Focused input elements

2

:first-letter

p:first-letter

First letter of all the elements <p>

1

:first-line

p:first-line

First line of all the elements <p>

1

:first-child

p:first-child

All elements <p>, which are first-child to their parents

2

:before

p:before

The content will be placed before each element <p>

2

:after

p:after

The content will be placed after each element <p>

2

:lang(language)

p:lang(it)

All elements <p> with the attribute lang, which include "it"

2

[attribute^=value]

a[src^="https"]

All elements with the attribute src, with value which begins with "https"

3

[attribute$=value]

a[src$=".pdf"]

All elements with the attribute src, with value which ends with ".pdf"

3

[attribute*=value]

a[src*="xhtml"]

All elements with the attribute src, with value which contains "xhtml"

3

:first-of-type

p:first-of-type

All p elements, which are first p elements of their parents

3

:last-of-type

p:last-of-type

All p elements, which are last p elements of their parents

3

:only-of-type

p:only-of-type

All p elements, which are the only p elements of their parents

3

:only-child

p:only-child

All p elements, which are the only-child elements of their parents

3

:nth-child(n)

p:nth-child(2)

All p elements, which are the second-child elements of their parents

3

:nth-last-child(n)

p:nth-last-child(2)

All p elements, which are the second last child elements of their parents

3

:nth-of-type(n)

p:nth-of-type(2)

All p elements , which are the second child of their parents

3

:nth-last-of-type(n)

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

All p elements, which are the second last child of their parents

3

:last-child

p:last-child

All p elements, which are the last child of their parents

3

:root

:root

Root element of a document

3

:empty

p:empty

All p elements, with no children (including text blocks)

3

:target

#news:target

Current active element #news (click on the URL, contains the name of the anchor)

3

:enabled

input:enabled

All enabled input elements

3

:disabled

input:disabled

All disabled input elements

3

:checked

input:checked

All checked boxes

3

:not(selector)

:not(p)

All elements which are not p elements

3

::selection

::selection

Selection of part of the element which is selected by the user

3


 

Read also

Conditional comments for IE

Conditional comments for IE

How to write in HTML

How to write in HTML

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation