ATTRIBUTE SELECTOR IN CSS3

[title] {
background-color: aliceblue;
}
[title="Persion cat"] {
text-decoration: line-through;
}
[title^="S"] {
font-weight: bold;
}
[title$="at"] {
font-style: italic;
}
[title*="sia"] {
border: 5px dotted blue;
}
[title~="Siamese"] {
text-decoration: underline;

Note: [attribute~=”value”] is used to select seprate value, and [attribute|=”value”] is used to select word with ‘-’ sepration.

[title|="Chantilly"] {
border: 4px dotted red;
}
[title*="sia" i] {
border: 4px dotted blue;
}
img[alt="cat"] {
...
}
img[title$="at"] {
// it will target all image elements with title attribute which // text ends with at.
}
img[alt="cat"][src^="nicecats"] {
// it will just select image attribute which alt="cat" and sec // starts with "nicecats"
}

Scource Code Avail At this Link.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store