Substring within the attribute value
In previous session I discussed about Attribute value selector, if you new then first see previous session because it is related to previous session.
In Attribute selector we can select whole string we already seen before,but now I am going to show you how can a part of attribute value and manipulate the element.
We can select substring in three ways
- Finding sub-string at beginning of attribute value.
Using ^ symbol we can find a substring at the beginning of the string into the attribute value.
2.Finding sub-string at end of attribute value.
Using $ symbol we can find a substring at the end of the string into the attribute value.
3.Finding sub-string at any place of attribute value.
Using * symbol we can find a substring at any place of the string into the attribute value.
In previous session i already discussed html element, attribute,attribute value.Now again i am disusing.
Html element:An HTML element is an individual component of an HTML document or web page, for example <h1>,<p>,<input> etc. this all are elements.
Html attribute:An HTML attribute is a modifier of an HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them. In HTML syntax, an attribute is added to an HTML start tag.
This is optional to use attribute or attribute value but as per project requirement we can use one or more attribute, for example <img src="pic1.gif" alt="auther"> it use two attribute
src and alt .
Attribute value:All attribute decorated with some value this is attribute value,suppose,src="pic1.gif" here pic1.gif is attribute value.
Attribute value:All attribute decorated with some value this is attribute value,suppose,src="pic1.gif" here pic1.gif is attribute value.
Program:
|
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
h1[class^="main"]{
color:green;
}
[class*="main"]{
border:2px solid red;
}
[class$="button"]:hover{
background-color:green;
}
</style>
</head>
<body>
<h1 class="main-heading">TTN TUTORIALS </h1>
<img src="pic1.gif" class="main-icon"
/>
<p class="Contain-main">Open Html file in notepad and see code</p>
<input type="button" class="main-button"
value="submit" />
<input type="reset" value="Reset" />
</body>
</html>
|
output:
Download the project
No comments:
Post a Comment