Attribute Value Selector

Attribute Selectors CSS

a[target] {
    background-color: hotpink;
}

Try it

Attribute on Image CSS

[title~=logo] {
    border: 5px solid red;
}

Try it

Attribute Value Selector

[class$="test"] {
    background: lightblue;
}

Try it

Attribute|=value Selector CSS

[class|=top] 
{
    background: red;
}

Try it

Attribute$=value Selector CSS

[class$="test"] {
    background: lightblue;
}

Try it

Attribute^=value Selector CSS

[class^="top"]
{
    background: lightgrey;
}

Try it

Styling-Form CSS

input[type="text"] 
{
    width: 200px;
    display: block;
    margin-bottom: 20px;
    background-color: lightgrey;
}

input[type="button"] 
{
    width: 100px;
    margin-left: 50px;
    display: block;
   background-color: hotpink;
}

Try it

[attribute=value] Selector CSS

a[target="_blank"] {
    background-color: hotpink;
}

Try it

Video Lecture