CSS Selector Tutorial and CSS Selector Reference

Published on: September 9, 2014   Last Updated on : June 6, 2018   Posted By : WebDesignReference

CSS Selector : helps to select or find an element for manipulation in HTML document.

Some commonly used selector types are :

  • Element selector : To select an element using element name.

    Example : use of CSS Element Selectors

    body {
    background-color: #bbb; text-align: left;
    }

    h1 {
    color: #eee; text-align: left;
    }

    p {
    font-family: “Arial”; font-size: 20px;
    }

    body, h1 and p are element selectors.

  • Id Selector : To select an element using specific Id.

    Example : use of CSS ID Selectors

    #body-bg {
    background-color: #bbb; text-align: left;
    }

    #heading {
    color: #eee; text-align: left;
    }

    #content-paragraph {
    font-family: “Arial”; font-size: 20px;
    }

    #body-bg, #heading and #content-paragraph are ID selectors.

  • Class : To select an element using Class name of an element.

    Example : use of CSS Class Selectors

    .body-bg {
    background-color: #bbb; text-align: left;
    }

    .heading {
    color: #eee; text-align: left;
    }

    .content-paragraph {
    font-family: “Arial”; font-size: 20px;
    }

    .body-bg, .heading and .content-paragraph are Class selectors.

  • Type : To select an element by type (like input type text or submit.)

    Example : use of CSS Input Type Selectors

    input[type=”text”] {
    background-color: #bbb; text-align: left;
    }

    input[type=”submit”] {
    color: #eee; text-align: center;
    }

    input[type=”reset”] {
    font-family: “Arial”; font-size: 20px;
    }

    input[type=”text”], input[type=”submit”] and input[type=”reset”] are input type selectors.

  • Attribute Selector : To select an element by attributes.

    Example : use of CSS Attribute Selectors

    a[target] {
    background-color: #bbb; text-align: left;
    }

    a[target] Attribute selectors.

 

A Complete List of CSS selectors, updated with new CSS3 selectors

Selectors Description CSS
.class_name Selects elements of the specified class_name. 1
#id_name Selects elements of the specified value for the id attribute. 1
* Selects all elements. 2
Element Selects all occurences of the element 1
<selector> <selector> Selects elements that match the second selector and that are arbitrary descendants of the elements matched by the first selector. 1
<selector> > <selector> Selects elements that match the second selector and that are immediate descendants of the elements matched by the first selector. 2
<selector> + <selector> Selects elements that match the second selector and that immediately follow an element that matches the first selector. 2
<selector> ~ <selector> Selects elements that match the second selector and that follow an element that matches the first selector. 3
[attr] Selects elements that define the specified attribute, regardless of value assigned to the attribute. 2
[attr=”val”] Selects elements that define attr with value val 2
[attr~=”val”] Selects elements that define attr and whose value for this attribute contains multiple values, one of which is val 2
[attr|=”val”] Selects elements that define attr and whose value , oneis a hypen-seperated list of values, the first of which is val 2
[attr*=”val”] Selects elements that define attr and whose value for this attribute contains string val 3
[attr$=”value”] Selects elements that define attr and whose value for this attribute ends with string val 3
:link Selects link elements 1
:visited Selects link elements the user has visited 1
:active Selects elements that are presently activated by the user. This usually means elements that are under the pointer when the mouse button is pressed. 1
:hover Selects elements that occupy the position on screen under the mouse pointer 1
:focus Selects the element that has the focus 2
::first-line Selects the first line of a block of text 1
::first-letter Selects the first letter of a block of text 1
:first-child Selects elements that are the first children of their containing elements 2
:before Inserts content before the selected element 2
:after Inserts content after the selected element 2
:lang(language) Selects elements based on the value of the lang attribute 2
:first-of-type Selects an element that is the first sibling of its type 3
:last-of-type Selects an element that is the last sibling of its type 3
:only-of-type Selects elements that are the sole element of their type defined by the their containing element 3
:only-child Selects elements that are the sole element defined by their containing element 3
:nth-child(n) Selects elements that are the nth child of their parent 3
:nth-last-child(n) Selects elements that are the nth from last child of their parent 3
:nth-of-type(n) Selects elements that are the nth child of their type defined by their parent 3
:nth-last-of-type(n) Selects elements that are the nth from last child of their type defined by their parent 3
:last-child Selects elements that are the last children of their containing elements 3
:root Selects the root element in the document. 3
:empty Selects element that contain no child elements 3
:target Selects the element referred to by the URL fragment identifier 3
:enabled Selects elements that are in their enabled state 3
:disabled Selects elements that are in their disabled state 3
:checked Selects elements that are in a checked state 3
:not(selector) Negates a selection(for example, selects all elements that are not matches by selector) 3
 

Also Related to CSS

 

Leave a Reply