If you have learned html and css, you must be aware of how to
target element with id or class in css.
<p id="demo_id"
class="demo_class">
</p>
|
above
element has id and class which you can use in css to target p element as
"#demo_id" and ".demo_class". But apart from these
selectors you can select element with other attributes using attribute
selector.
<p id="demo_id"
class="demo_class"
rel="name"
title="name of
Jon"> </p>
|
In
above P tag we can see attributes other than class and id, like
"rel", "title". So it is possible to us to user these
attributes for selecting perticuler P tag.
p[rel] {
background-color: yellow;
}
|
this
css will target p tag which has rel attribute and change its background color
to yellow.
It
is also possible to use attribute with value. Let's see another example. If we
have two P tags
<p rel="name">Rajesh</p>
<p rel="email">rajesh@something.com</p>
|
And
in css if we write
p[rel="name"]{
background-color:
yellow;
}
|
Then
this css will be apply for the p tag with rel has value "name".
Attribute
selector has lot more option to do. Let's take a look at these.
Above
example is attribute with exactly match value.
[attribute~="value"] Selector.
The
[attribute~="value"] selector is used to select elements with an
attribute value containing a specified word.
The
following example selects all elements with a title attribute that contains a
space-separated list of words, one of which is "image":
<img src="image1.jpg"
title="small
image " width="150" height="113">
<img src="image2.jpg "
title=" image
" width="224"
height="162">
|
[attribute|="value"] Selector
The
[attribute|="value"] selector is used to select elements with the
specified attribute starting with the specified value.
The
following example selects all elements with a class attribute value that begins
with "top":
Note:
The value has to be a whole word, either alone, like class="top", or
followed by a hyphen( - ), like class="top-text"!
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello
world!</p>
|
[attribute^="value"] Selector
The
[attribute^="value"] selector is used to select elements whose
attribute value begins with a specified value.
The
following example selects all elements with a class attribute value that begins
with "top":
Note:
The value does not have to be a whole word!
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello
world!</p>
<p class="topcontent">Are
you learning CSS?</p>
|
[attribute$="value"] Selector
The
[attribute$="value"] selector is used to select elements whose
attribute value ends with a specified value.
The
following example selects all elements with a class attribute value that ends
with "test":
Note:
The value does not have to be a whole word!
<div class="first_test">The
first div element.</div>
<div class="my-test">The
third div element.</div>
<p class="mytest">This
is some text in a paragraph.</p>
|
[attribute*="value"] Selector
The
[attribute*="value"] selector is used to select elements whose
attribute value contains a specified value.
The
following example selects all elements with a class attribute value that
contains "te":
Note:
The value does not have to be a whole word!
<div class="first_test">The
first div element.</div>
<div class="second">The
second div element.</div>
<div class="my-test">The
third div element.</div>
<p class="mytest">This
is some text in a paragraph.</p>
|
