CSS Selectors -2 Attributes

[attribute] [attr] All elements with a attr attribute
[attribute=value] [title=hello] All elements with title=”hello”
[attribute~=value] [title~=hello] All elements with a title containing “hello”
[attribute|=value] [title|=hello] All elements with a title beginning  with “hello”
[attribute^=value] p[title^=”this”] All p element whose title starts with “this”
[attribute$=value] img[src$=”.jpg”] All element whose src ends with “.jpg”
[attribute*=value] input[value*=”money”] All element whose value  contains the word “money”

 


<!DOCTYPE html>

<html>
<head>
<title>Attributes</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
[title]
{
background-color: teal;
}
[value='khaki']
{
background-color: khaki;
}
[class|='this']
{
background-color: pink;
}
</style>
</head>
<body>
<input type="text" title="Hello" value="I have a title"/>
<input type="text" value="I have no title"/>
<input type="text" value="khaki"/>
<textarea title="this is my title">My title starts with 'this'</textarea>
<p class="My-Title">My class doesn't start with 'this'</p>
<p class="this-is-my-class">My class starts with 'this'</p>

</body>
</html>

Leave a Reply