[attribute] selector in CSS3

How to select elements with the specified attribute in CSS3?

By using attribute selector we can select the elements with the specified attribute.

<style>
        a:link {
            background-color: red;
        }

        a[target] {
            background-color: lightgreen;
        }
</style>

<body>    
    <p>Hyperlink without attribute :<a href="http://www.techfunda.com" title="www.TechFunda.com">TechFunda</a></p>
    <p>Hyperlink with attribute:<a href="http://www.dotnetfunda.com" target="_blank">DotNetFunda</a></p>
</body>

In the above code snippet we have given style "background-color:lightgreen" to the target attribute of DotNetFunda hyperlink. Clicking on the hyperlink "TechFunda" with background color red sends user to http://www.techfunda.com website in the same tab, clicking on the hyperlink "DotNetFunda" with background color green sends user to http://www.dotnetfunda.com website in the new tab. That is due to the presence of target="_blank".

OUTPUT

Views: 3170 | Post Order: 36

CSS3 > Selectors

[attribute] selector in CSS3

How to select elements with the specified attribute in CSS3?

Related Posts

Utility Tools