CSS Selectors

For sure, everyone can select DOM elements using ID, CLASS and type of the element, but not many know about enormous potential of CSS selectors. In this post I’m going to show all major approaches to select DOM elements.
Please keep in mind that not all of them work in the old browsers.

* – select all elements

X –  select element by its type

#X – select element by its ID

.X – select all elements by its CLASS

.X .Y – select ALL children elements with the class .Y based on the parent element with the class .X

X  Y – select ALL children elements with the type Y based on the parent element  X

X > Y  – select  DIRECT CHILDREN elements with the type Y based on the parent element  X

X + Y – select  the ONE neighbor element Y following right after the element  X

X ~ Y – select  ALL  neighbor elements Y following  after the element  X

X[ATTR] – select all elements that have attribute ATTR

X[ATTR = “VALUE”] – select all elements that have attribute ATTR with value is equal to VALUE

X[ATTR ^= “VAL”] – select all elements that have attribute ATTR with value starts with letters VAL

X[ATTR $= “LUE”] – select all elements that have attribute ATTR with value ends with letters LUE

X[ATTR *= “ALU”] – select all elements that have attribute ATTR with value contains letters ALU

X[ATTR ~= “VALUE”] – select all elements that have attribute ATTR with values separated by space  and one of the value is equal to VALUE.

X[ATTR |= “VALUE”] – select all elements that have attribute ATTR with values separated by space  and one of the value is equal to VALUE.

* – select all elements

Support: CSS2.
Browsers: IE 8.0+, Google Chrome 1.0+, Opera 3.5+, Safari 1.0+, Firefox 1.0+, Android 1.0+, iOS 1.0+.
Browsers with partial support: IE 5.0+.

/* select all elements on the page */
* {
    margin: 0px;
    padding: 0px;
}

/* select all elements inside #BODY */
#body * {
    margin: 0px;
    padding: 0px;    
}

X –  select element by its type
Support: CSS1.
Browsers: IE 3.0+, Google Chrome 1.0+, Opera 3.5+, Safari 1.0+, Firefox 1.0+, Android 1.0+, iOS 1.0+.

p {
    color: red;
}

#X – select element by its ID
Support: CSS1.
Browsers: IE 7.0+, Google Chrome 1.0+, Opera 3.5+, Safari 1.0+, Firefox 1.0+, Android 1.0+, iOS 1.0+.
Browsers with partial support: IE 3.0+.

#footer {
    background: red;
}

.X – select all elements by its CLASS
Support: CSS1.
Browsers: IE 7.0+, Google Chrome 1.0+, Opera 3.5+, Safari 1.0+, Firefox 1.0+, Android 1.0+, iOS 1.0+.
Browsers with partial support: IE 3.0.

.clear {
    clear: both;
}

.X .Y – select ALL children elements with the class .Y based on the parent element with the class .X
Support: CSS2.
Browsers: IE 7.0+, Google Chrome 1.0+, Opera 3.5+, Safari 1.0+, Firefox 1.0+, Android 1.0+, iOS 1.0+.
Browsers with partial support: IE 5.0.

.left .level_1 {
   font-size: 1em;
}

X  Y – select ALL children elements with the type Y based on the parent element  X
Support: CSS1.
Browsers: IE 7.0+, Google Chrome 1.0+, Opera 3.5+, Safari 1.0+, Firefox 1.0+, Android 1.0+, iOS 1.0+.
Browsers with partial support: IE 4.0+.

div a {
    text-decoration: underline;
}

X > Y  – select  DIRECT CHILDREN elements with the type Y based on the parent element  X
Support: CSS2.
Browsers: IE 8.0+, Google Chrome 1.0+, Opera 3.5+, Safari 1.0+, Firefox 1.0+, Android 1.0+, iOS 1.0+.
Browsers with partial support: IE 7.0.

<div id="container">
    <ul id="main">
        <li>
            Outer list element
            <ul id="second">
                <li> Inner list element </li>
            </ul>
        </li>
        <li> Outer list element </li>
        <li> Outer list element </li>
        <li> Outer list element </li>
    </ul>
</div>

X + Y – select  the ONE neighbor element Y following right after the element  X
Support: CSS2.
Browsers: IE 8.0+, Google Chrome 1.0+, Opera 3.5+, Safari 1.0+, Firefox 1.0+, Android 1.0+, iOS 1.0+.
Browsers with partial support: IE 7.0.

<div> Block </div>
<p> First paragraph </p>
<p> Second paragraph </p>
div + p {
    color: red;
}

X ~ Y – select  ALL  neighbor elements Y following  after the element  X
Support: CSS3.
Browsers: Google Chrome 5.0+, Opera 9.2+, Safari 3.0+, Firefox 1.0+, Android 1.0+, iOS 1.0+.
Browsers with partial support: IE 7.0+.

<div>
    <div> Block element </div>
    <p> First paragraph </p>
    <p> Second paragraph </p>
    <p> Third paragraph </p>
</div>
div ~ p {
   color: blue;
}

X[ATTR] – select all elements that have attribute ATTR
Support: CSS2.
Browsers: IE 7.0+, Google Chrome 1.0+, Opera 3.5+, Safari 1.0+, Firefox 1.0+, Android 1.0+, iOS 1.0+.

<input type="text" value="Text" />
<input type="button" value="Click me" title="Title" />
input[title] {
    color: red;
}

X[ATTR = “VALUE”] – select all elements that have attribute ATTR with value is equal to VALUE
Support: CSS2.
Browsers: IE 7.0+, Google Chrome 1.0+, Opera 3.5+, Safari 1.0+, Firefox 1.0+, Android 1.0+, iOS 1.0+.

<input type="text" value="Text" />
<input type="button" value="Click me" />
input[type="button"] {
    color: red;
}

X[ATTR ^= “VAL”] – select all elements that have attribute ATTR with value starts with letters VAL
Support: CSS3.
Browsers: IE 7.0+, Google Chrome 1.0+, Opera 3.5+, Safari 1.0+, Firefox 1.0+, Android 1.0+, iOS 1.0+.

<input type="text" value="Text" />
<input type="button" value="Click me" title="Send contact form" />
input[title^="Send contact"] {
    color: red;
}

X[ATTR $= “LUE”] – select all elements that have attribute ATTR with value ends with letters LUE
Support: CSS3.
Browsers: IE 7.0+, Google Chrome 1.0+, Opera 3.5+, Safari 1.0+, Firefox 1.0+, Android 1.0+, iOS 1.0+.

<input type="text" value="Text" />
<input type="button" value="Click me" title="Send contact form" />
input[title$="contact form"] {
    color: red;
}

X[ATTR *= “ALU”] – select all elements that have attribute ATTR with value contains letters ALU
Support: CSS3.
Browsers: IE 7.0+, Google Chrome 1.0+, Opera 3.5+, Safari 1.0+, Firefox 1.0+, Android 1.0+, iOS 1.0+.

<input type="text" value="Text" />
<input type="button" value="Click me" title="Send contact form" />
input[title*="contact"] {
    color: red;
}

X[ATTR ~= “VALUE”] – select all elements that have attribute ATTR with values separated by space  and one of the value is equal to VALUE.
Support: CSS2.
Browsers: IE 7.0+, Google Chrome 1.0+, Opera 3.5+, Safari 1.0+, Firefox 1.0+, Android 1.0+, iOS 1.0+.

<a href="javascript: void(0);" data-info="external image">Click me</a>
a[data-info~="external"] {
    color: red;
}
a[data-info~="image"] {
    border: 1px solid black;
    padding: 5px;
}

X[ATTR |= “VALUE”] – select all elements that have attribute ATTR with values separated by space  and one of the value is equal to VALUE.
Support: CSS2.
Browsers: IE 7.0+, Google Chrome 1.0+, Opera 3.5+, Safari 1.0+, Firefox 1.0+, Android 1.0+, iOS 1.0+.

<div class="menu-block">
    <ul>
        <li>First element</li>
        <li>Second element</li>
        <li>Third element</li>
    </ul>
</div>
div[class|="menu"] {
    color: blue;
}

Comments are closed.