CSS attribute selectors helps to apply style on any attribute of an element.

We have seen various CSS selectors before. You have learnt about id selectors, class selectors, type selectors and so on.

Now its time to learn about attribute selectors.

What is an attribute?

In general, Attribute is a category which contain information about an object. Every attribute has some value.
Suppose “Sushrut got 80% marks”. This sentence tells marks of Sushrut. Here object is Sushrut, attribute is marks and value is 80%.

What is HTML attributes?

HTML attributes definition is similar as above definition. HTML attribute is a category contains information about element.

W3 schools provides more information about HTML attributes.

Example: <img src=” image path” height=”100px” width=”100px”/>

In above example “src, height and width” are attributes of an element “img”.

And CSS attributes selectors applies directly on attributes.

CSS attribute selectors.

syntax.

[attribute]{property:value;}= value of specified property will be applied on specified attribute of all element.
Example: [alt]{display:none;}
Above example tells to hide all elements which contain “alt” attribute.

element[attribute]{property:value;}= value specified property will be applied on specified attribute of specified element.
Example: a[alt]{display:none;}
Above example tells to hide only links which contain “alt” attribute.

There are following ways to apply CSS attributive Selectors on element.

  • [attribute].
  • [attribute=value].
  • [attribute~=value].
  • [attribute|=value].
  • [attribute^=value].
  • [attribute$=value].
  • [attribute*=value].

Above ways will be applied to specified attribute of all elements. To apply style to specific element, above ways should be started with specific element.

Ways of appling CSS attributive Selectors on element can be understand better using examples. We will apply attribute selectors in following HTML snippet.

<body>
<div class=”gamesmobile”>gamesmobile</div></br>
<div class=”games-mobile”>games-mobile</div></br>
<div class=”games mobile”>games mobile</div></br>
<div class=”mobilegames”>mobilegames</div></br>
<div class=”mobile-games”>mobile-games</div></br>
<div class=”mobile games”>mobile games</div></br>
<div class=”games”>games</div>
</body>


 [attribute=value].

The [attribute=value]selector tells to apply style to all element which value exact matched with specified value of specified attribute.

apply following style in above HTML snippet.

[class=games] {font-size: 50px; }

Output will be

CSS attribute selector

 

[attribute~=value].

The [attribute~=value] selector tells to apply style to all element which value of specified attribute has specified value separated by space or exact matched with specified value.

apply following style in above HTML snippet.

[class~=games] {font-size: 50px; }

Output will be.

CSS attribute selector ~operator

[attribute|=value].

The [attribute|=value] selector tells to apply style to all element which value of specified attribute started with specified value followed by dash or exact matched with specified value.

apply following style in above HTML snippet.

[class|=games] {font-size: 50px; } 

Output will be.

CSS attribute selectors standing line

[attribute^=value].

[attribute^=value]  selector tells to apply style to all element which value beginning with specified value of the  specified attribute.

apply following style in above HTML snippet.

[class^=games] {font-size: 50px; } 

CSS attribute selectors ^operator

[attribute$=value].

[attribute$=value]  selector tells to apply style to all element which value ended with specified value of the specified attribute.

apply following style in above HTML snippet.

[class$=games] {font-size: 50px; }

Output will be.

CSS attribute selectors $operator

[attribute*=value].

[attribute*=value]  selector tells to apply style to all element which value contain specified value of the  specified attribute.

apply following style in above HTML snippet.

[class*=games] {font-size: 50px; }

output will be.

CSS attribute selectors star operator

 

Lets learn above examples with animation.

Now you have leart working CSS attribute selectors by reading this article with example. Lets have some fun with animation.

Following example will show same output as above examples. But we have put rotating text animation.
Change the attribute selector as you learnt above.

Copy following snippet in notepad and save as “attributeselectordemo.html”. Run this file and enjoy.
Change the attribute selector as you learnt above.

<html>
<head>
<style>
[class=games] {
font-size: 50px;
display: inline-block;

-webkit-animation: abc .99s linear 3;
}

@-webkit-keyframes abc{
0% { -webkit-transform: rotate(0deg);}
50% { -webkit-transform: rotate(180deg);}
100% { -webkit-transform: rotate(360deg); }
}
</style>
</head>

<body>
<h1>Lets have fun with rotated output</h1></br>
<div class=”gamesmobile”>gamesmobile</div></br>
<div class=”games-mobile”>games-mobile</div></br>
<div class=”games mobile”>games mobile</div></br>
<div class=”mobilegames”>mobilegames</div></br>
<div class=”mobile-games”>mobile-games</div></br>
<div class=”mobile games”>mobile games</div></br>
<div class=”games”>games</div>
</body>

</html>

Comments

comments

One thought on “CSS attribute selectors helps to apply style on any attribute of an element.

  1. Excellent post. Keep writing such kind of info on your blog.
    Im really impressed by it.
    Hi there, You’ve performed an excellent job. I’ll certainly digg it and
    in my opinion suggest to my friends. I’m sure they will be benefited from this website.

Comments are closed.