CSS Attributes

by Shoaib Chikate

HTML

<h2 id="title" class="magic" rel="friend">Shoaib Chikate</h2>

<div class="centered">
<h1 style="color:brown;">[rel="friend"]</h1>
    <h2>Attribute exactly equals the certain value</h2>
</div>

<div class="box-case">
Example:
<h2 rel="developer">Shoaib Chikate</h2>
<h2 rel="develope">Ashok Dongare</h2>
</div>


<div class="centered">
<h1 style="color:brown;">[rel*="friend"]</h1>
    <h2>Attribute that contains certain value.</h2>
</div>
<div class="box-case">
Example:
<h2 rel="binja-developer-semanticbits">Shoaib Chikate</h2>
</div>

<div class="centered">
<h1 style="color:brown;">[rel^="friend"]</h1>
    <h2>Attribute that begins with certain value.</h2>
</div>

<div class="centered">
<h1 style="color:brown;">[rel$="friend"]</h1>
    <h2>Attribute that ends with certain value.</h2>
</div>


<div class="box-case">
Example:

<h2 rel="india-developer">Shoaib Chikate</h2>
<h2 rel="tester-india">Ashok Dongare</h2>
</div>

<div class="centered">
<h1 style="color:brown;">[rel~="friend"]</h1>
    <h2>Attribute is within the space seperated list</h2>
</div>
   
<div class="box-case">
Example:

<h2 rel="singer builder cricketer india">Shoaib Chikate</h2>
<h2 rel="dancer builde tester">Ashok Dongare</h2>
</div>

<div class="centered">
<h1 style="color:brown;">[rel|="friend"]</h1>
    <h2>Attribute is within the dashed seperated list</h2>
</div>

<div class="box-case">
Example:

<h2 rel="connector-singer--cricketer">Shoaib Chikate</h2>
<h2 rel="dancer-build-tester">Ashok Dongare</h2>
</div>

<div class="centered">
<h1 style="color:brown;">[rel="friend"][title^="Best"]</h1>
    <h2>Attribute is within the dashed seperated list</h2>
</div>

<div class="box-case">
Example:

<h2 rel="friend" title="Best Friend">Shoaib Chikate</h2>
<h2 rel="friend" title="Good Friedn">Ashok Dongare</h2>
</div>

CSS

h2[rel="friend"]{
    color:green;
}

.centered{
    text-align:center;
    border-top:1px solid;
}

.box-case{
    border:2px solid;
    border-radius:6px;
    
}

h2[rel="developer"]{
    color:purple;
    text-transform:uppercase;
}

h2[rel*="semantic"]{
    color:red;
    text-transform:uppercase;
}

h2[rel^="india"]{
    color:grey;
    text-transform:uppercase;
}

h2[rel$="india"]{
    color:pink;
    text-transform:uppercase;
}

h2[rel~="builder"]{
    color:green;
}

h2[rel|="connector"]{
    color:blue;
}

[rel="friend"][title^="Best"]:before{
    content:"Hello ";
    color:red;
}