What are CSS Attribute Selectors?

How to use CSS attribute selectors?

Css attribute selectors we defines array symbol [] as we using in the javascript. We can use any attribute inside of this array symbol as

[attribute Name]

[id], [class], [style] etc.

means if we are using html element, and all html element have a lot property as like id, class, title, style etc. These are the common attribute for the all html elements. We can give style for the all element through his attributes. Css attribute have following type of the attribute:

CSS [attribute] Selector, CSS [attribute="value"] Selector, CSS [attribute|="value"] Selector, CSS [attribute~="value"] Selector, CSS [attribute$="value"] Selector, CSS [attribute^="value"] Selector, CSS [attribute*="value"] Selector

Css attribute selector we can define from the more symbol like (|, ~, $, ^, *) also we can give style where define value as:

div [title="Mr"], div [class="myClassName"]

Means we can assign value and define according to value. As giving more example in the below:

CSS [attribute="value"] Example:

Example it's show color only where using value in the title "Mr".

<style>

[title~=Mr] {

  background: #0bf;

}

</style>

<div title="I am Mr sheo">atribute test </div>

<br>

<div title="sheo Mr">atribute test </div>

CSS [attribute] Example:

Example it's show color only where using attribute id and class in the element.

<style>

div[id] {

  background: #0bf;

}

div [class] {

  background: #0bf;

}

</style>

<div id="sheo">atribute test </div>

<br>

<div id="idname">atribute test </div>

<div>

    <p class="test">Paragraph id test</p>

</div>

CSS [attribute|="value"] Example:

We are using an attribute with the | (pipe symbol) so it's affected class has test in stating with a dash (-) or hyphen. It will not be affected as using test in the last of the class or with _ . as below example:

<style>

        [class|=test] {

            background: #0bf;

        }

    </style>

 <p class="test-text">Anything text</p>

    <div class="test-section">atribute test </div>

    <p class="testworld">text here any thing</p>

    <p class="worldtest">text here any thing</p>

    <p class="test_section">text here any thing</p>

CSS [attribute$="value"] Example:

We are using attribute value with the $ sign it will affected from the ends value. It will not affected which value getting starting or middle. You can more understand with below example:

<style>

        [class$=test] {

            background: #0bf;

        }

        [id$=any] {

            background: #0b6;

        }

    </style>

<p class="text-test">Anything text</p>

    <div class="test-section">atribute test </div>

    <p class="testworld">text here any thing</p>

    <p class="worldtest">text here any thing</p>

    <p class="section_test">text here any thing</p>

    <p class="sectiontestee">text here any thing</p>

    <br>

    <h4>Using with id any</h4>

    <p id="sectiontesany">text here any thing</p>

    <p id="anytest">text here any thing</p>

The result will be shown below:

CSS [attribute^="value"] Example:

We are using attribute value with the ^ (Caret) sign will affected from the beginning value. It will not affect which value from the end of the middle. Below code example for the caret attribute:

[class^=test] {

            background: #0bf;

        }

        [id^=any] {

            background: #0b6;

        }

<p class="text-test">Anything text</p>

    <div class="test-section">atribute test </div>

    <p class="testworld">text here any thing</p>

    <p class="worldtest">text here any thing</p>

    <p class="test_section">text here any thing</p>

    <p class="sectiontestee">text here any thing</p>

    <h4>Using with id any</h4>

    <p id="sectiontesany">text here any thing</p>

    <p id="anytest">text here any thing</p>

    <p id="ssanytest">text here any thing</p>

CSS [attribute~="value"] Example:

We are using attribute value with the ~ (Tilde) sign. it will affect only where we found a single complete word not required with any other word or any symbols as (-, _, etc). you can see below code example for the tilde selector in the CSS:

<style>

        [class~=test] {

            background: #0bf;

        }

        [title~=test] {

            background: #0bf;

        }

        [id~=any] {

            background: #0b6;

        }

    </style>

<p class="test">Anything text</p>

    <p class="testworld">text here any thing</p>

    <p class="worldtest">text here any thing</p>

    <p class="test_section">text here any thing</p>

    <div class="test-section" title="test">atribute test </div>

    <p class="sectiontestee">text here any thing</p>

    <h4>Using with id any</h4>

    <p id="sectiontesany">text here any thing</p>

    <p id="any">text here any thing</p>

    <p id="ssanytest">text here any thing</p>

CSS [attribute*="value"] Example:

We are using attribute value with the * (Asterisk) sign it will work with the matched value, it's not required that we used starting or the middle or the ends. Also, we can use it with any symbol as -, _ . you can see below example code:

 <style>

        [class*=test] {

            background: #0bf;

        }

        [title*=test] {

            background: #0bf;

        }

        [id*=any] {

            background: #0b6;

        }

    </style>

 <p class="test">Anything text</p>

    <p class="testworld">text here any thing</p>

    <p class="worldtest">text here any thing</p>

    <p class="tes_section">text here any thing</p>

    <div class="test-section" title="test">atribute test </div>

    <p class="sectiontestee">text here any thing</p>

    <h4>Using with id any</h4>

    <p id="sectiontesany">text here any thing</p>

    <p id="any">text here any thing</p>

    <p id="anttt">here any thing</p>

    <p id="ssanytest">text here any thing</p>