CSS Attribute Selectors

Next ❯CSS3 Background

Used to select elements you want to style with the help of attribute or its values

  • turned_in_notProperty
    • [attribute]
    • [attribute="value"]
    • [attribute|="value"]
    • [attribute~="value"]
    • [attribute^="value"]
    • [attribute$="value"]
    • [attribute*="value"]

[attribute]

It selects all elements having specified attribute

/*Syntax*/

selector[attribute] {
  /*css properties*/
}

<p id="ab">welcome</p>

<div id="aa"> Hello..!</div>

Try below options to see comment

[id] {
  background-color:lightgreen;
  border:2px solid red;
}
div[id] {
  background-color:lightgreen;
  border:2px solid blue;
}

[attribute="value"]

It selects all elements having specified attribute with specified value

/*Syntax*/

selector[attribute="value"] {
  /*css properties*/
}

<p id="abc"> welcome</p>

<p id="bcd"> hello</p>

Try below options to see comment

p[id="abc"]{
  background-color:lightgreen;
  border:2px solid red;
}
p[id="bcd"] {
  background-color:lightgreen;
  border:2px solid blue;
}

[attribute|="value"]

It selects all elements having specified attribute with specified value equal to or followed by a hyphen(-)

/*Syntax*/

selector[attribute|="value"]{
  /*css properties*/
}

<p className="ab">Hello friends!</p>

<p className="ab-cd">Good Luck !</p>

Try below options to see comment

p[class|="ab"] {
  background-color:lightgreen;
  border:2px solid red;
}
p[class|="ab-cd"] {
  background-color:lightgreen;
  border:2px solid blue;
}

[attribute~="value"]

It selects all elements having specified attribute containing a specified value

/*Syntax*/

selector[attribute~="value"]{
  /*css properties*/
}

<p className="aa ab">Hello friends!</p>

<p className="cd de">Good Luck !</p>

Try below options to see comment

p[class~="ab"] {
  background-color:lightgreen;
  border:2px solid red;
}
p[class~="cd"] {
  background-color:lightgreen;
  border:2px solid blue;
}

[attribute^="value"]

It selects all elements having specified attribute begins with specified value

/*Syntax*/

selector[attribute^="value"]{
  /*css properties*/
}

<p className="abc">Hello friends!</p>

<p className="xyz">Good Luck !</p>

Try below options to see comment

p[class^="ab"] {
  background-color:lightgreen;
  border:2px solid red;
}
p[class^="x"] {
  background-color:lightgreen;
  border:2px solid blue;
}

[attribute$="value"]

It selects all elements having specified attribute ends with specified value

/*Syntax*/

selector[attribute$="value"]{
  /*css properties*/
}

<p className="apple">Apple !</p>

<p className="mango">Mango !</p>

Try below options to see comment

p[class$="le"] {
  background-color:lightgreen;
  border:2px solid red;
}
p[class$="ngo"] {
  background-color:lightgreen;
  border:2px solid blue;
}

[attribute*="value"]

It selects all elements having specified attribute which contains substring as specified value

/*Syntax*/

selector[attribute*="value"]{
  /*css properties*/
}

<p className="apple">Apple !</p>

<p className="mango">Mango !</p>

Try below options to see comment

p[class*="p"] {
  background-color:lightgreen;
  border:2px solid red;
}
p[class*="ng"] {
  background-color:lightgreen;
  border:2px solid blue;
}

  • CSS3 Background
❮ Prev Pseudo Elements
Next ❯CSS3 Background
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯