CSS Selector Tutorial and CSS Selector Reference

Last Updated on: April 16, 2020   Posted By: Web Design Reference

CSS Selector Tutorial: Learn CSS Selector basic concept, Different Type of CSS Selectors, CSS Selectors Reference Guide, Know what is CSS Element Selectors, CSS ID Selectors, CSS Class Selectors, and CSS Selectors Examples. In this page to learn the CSS Selectors definition, the Purpose of using CSS Selectors, and how to use CSS Selectors on a web page with examples. Follow and Like us on Facebook, Twitter, LinkedIn, Pinterest for the latest posts.

What are CSS Selectors?

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

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

Web Design Reference Guide Android App for Website Developers

Web Design Reference Guide Android App: Web Design Tutorial App is a tutorial and reference-based app. It provides Web Design Tutorial and Reference to Web Designers or Web Developers to grow their Web Development skills.

Also Related to This Page

 

Leave a Reply