How To Use Cascading Style Sheets Attribute Selectors

Posted By Bajarangi soft , Posted On 05-11-2020

In CSS It is possible to style HTML elements that have specific attributes or attribute values. So today we discuss how to do it.

How To Use Cascading Style Sheets Attribute Selectors

Complete Code For Using Cascading Style Sheets Attribute Selectors.
Create Index.html and implement below code in it.

<!DOCTYPE html>
<html>
<head>
    <title>How To Use Cascading Style Sheets Attribute Selectors</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
    body {
        background: #c7254e;
    }
    a[target] {
        background-color: lightpink;
    }
    .div2 a[target=_blank] {
        background-color: lightcyan;
    }
    .div3 [class|=top] {
        background: lightgrey;
    }
    .div4 [class^="top"] {
        background: lightseagreen;
    }
    .div5 [class$="test"] {
        background: lightgoldenrodyellow;
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: white;">Cascading Style Sheets Attribute Selectors</h1>
    </div>
    <br>
    <div class="well">
        <div class="div1">
           <h2>CSS [attribute="value"] Selector</h2>
            <a href="https://blog.bajarangisoft.com/blogs">Bajarangisoft</a>
            <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
        </div>
        <div class="div2">
            <h2>CSS [attribute~="value"] Selector</h2>
            <a href="https://blog.bajarangisoft.com/blogs">Bajarangisoft</a>
            <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
        </div>
        <div class="div3">
            <h2>CSS [attribute|="value"] Selector</h2>
            <a href="https://blog.bajarangisoft.com/blogs">Bajarangisoft</a>
            <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
        </div>
        <div class="div4">
            <h2>CSS [attribute^="value"] Selector</h2>
            <a href="https://blog.bajarangisoft.com/blogs">Bajarangisoft</a>
            <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
        </div>
        <div class="div5">
            <h2>CSS [attribute$="value"] Selector</h2>
            <a href="https://blog.bajarangisoft.com/blogs">Bajarangisoft</a>
            <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
        </div>
        <div class="div5">
            <h2>CSS [attribute*="value"] Selector</h2>
            <a href="https://blog.bajarangisoft.com/blogs">Bajarangisoft</a>
            <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
        </div>
    </div>
    <br>
</div>
</body>
</html>