Attribute Selectors In CSS
CSS Selectors Can be divided into Five categories:
1.Simple Selectors (Element selector, Id selector, Class selector, Universalselector)
2.Combinator Selectors (Descendant selector, child selector, sibling selector,General selector)
3.
Attribute Selector (allow you to select elements by referring their attributes)
4.Pseudo-class selectors (select elements based on a certain state)
5.
Pseudo-elements selectors (select and style a part of an element)
The
[attribute] selector is used to select elements with a specified attribute.
[attribute] Selectors in CSS with Example
[attribute] Selector: This type of attribute selector
is used to select all the elements that have the specified attribute and
applies the CSS property to that attribute .
Example 1 : [attribute] Selectors
|
<!DOCTYPE html> <html> <head> <style> a[target] {
background-color: red; } </style> </head> <body>
<p>The links with a target attribute gets a
yellow background:</p>
<a
href="https://www.launchpadlwd.xyz/">launchpadlwd.xyz</a> <a href="https://www.youtube.com/"
target="_link">disney.com</a> <a href="https://www.google.com/"
target="_link1">wikipedia.org</a>
<h2>Welcome To Launchpadlwd blog</h2>
</body> </html> |
Output
[attribute="value"] Selectors in CSS with Example
[attribute = “value”] Selector: This selector is used to select all the elements whose attribute has the value exactly same as the specified value.
Example 2 : [attribute = "value"] Selectors
|
<!DOCTYPE html> <html> <head> <style> a[target="_link"] {
background-color: red; } </style> </head> <body>
<p>The links with a target attribute gets a
yellow background:</p>
<a
href="https://www.launchpadlwd.xyz/">launchpadlwd.xyz</a> <a href="https://www.youtube.com/"
target="_link">disney.com</a> <a href="https://www.google.com/"
target="_link1">wikipedia.org</a>
<h2>Welcome To Launchpadlwd blog</h2>
</body> </html> |
Output:
[attribute~ = "value"] Selectors in CSS with Example
[attribute~=”value”] Selector: This selector is used to
select all the elements whose attribute containing a similar word i.e , one of
which is exactly equal to the specified value.
Example 3 : [attribute~ = "value"] Selectors
|
<!DOCTYPE
html> <html> <head> <style> [class~="div1"]
{ background-color: red; font-style: italic; }
[class~="div3"]
{ background-color: blue; font-style: oblique; } </style> </head> <body>
<h2>Welcome
To Launchpadlwd blog</h2>
<div
class="div1"> This is first div </div>
<div
class="div2"> This is second div </div>
<div
class="div3"> This is Third div </div>
</body> </html> |
Output:
[attribute | = "value"] Selectors in CSS with Example
[attribute|=”value”] Selector: This selector is used to
select all the elements whose attribute has a hyphen-separated list of values
beginning with the specified value. The value has to be a whole word either
alone or followed by a hyphen.
Example 4 : [attribute | = value] Selectors
|
<!DOCTYPE
html> <html> <head> <style> [class|=div] { background-color: red; font-style: italic; font-size: 25px; } </style> </head> <body> <h2>Welcome
To Launchpadlwd blog</h2> <div
class="div-1"> This is first div </div> <div
class="para"> This is second div </div> <div
class="div-2"> This is Third div </div> </body> </html> |
Output:
[attribute ^ = "value"] Selectors in CSS with Example
Example 5 : [attribute ^ = value] Selectors
|
<!DOCTYPE
html> <html> <head> <style> [class^=div] { background-color: red; font-style: italic; font-size: 25px; } </style> </head> <body> <h2>Welcome
To Launchpadlwd blog</h2> <div
class="div-1"> This is first div </div> <div
class="divends"> This is second div </div> <div
class="div-2"> This is Third div </div> </body> </html> |
Output:
[attribute$ = "value"] Selectors in CSS with Example
[attribute$=”value”] Selector: This selector is used to
select all the elements whose attribute value ends with the specified value.
The value doesn’t need to be a whole word.
Example 6 : [attribute$ = value] Selectors
|
<!DOCTYPE
html> <html> <head> <style> [class$=div] { background-color:greenyellow; font-style: italic; font-size: 25px; }
</style> </head> <body>
<h2>Welcome
To Launchpadlwd blog</h2>
<div
class="1-div"> This is first div </div>
<div
class="divends"> This is second div </div>
<div
class="2-div"> This is Third div </div>
</body> </html> |
Output:
[attribute* = "value"] Selectors in CSS with Example
[attribute*=”value”] Selector: This selector selects all the elements whose attribute value contains the specified value present anywhere. The value doesn’t need to be a whole word.
Example 7 : [attribute* = "value"] Selectors
|
<!DOCTYPE
html> <html> <head> <style> [class*=div] { background-color:hotpink; font-style: italic; font-size: 25px; }
</style> </head> <body>
<h2>Welcome
To Launchpadlwd blog</h2>
<div
class="1-diving"> This is first div </div>
<div
class="para"> This is second div </div>
<div
class="2-diving"> This is Third div </div>
</body> </html> |
Output:
Posts
0 Comments
Please do not enter any spam links in the comment box