Home arrow Style Sheets arrow Page 3 - Learn CSS, Selectors, part 2
STYLE SHEETS

Learn CSS, Selectors, part 2


In the first article covering selectors, we discussed the CSS group, universal, class and ID selectors. In this article, we continue our discussion of selectors with various attribute selectors.

Author Info:
By: Michael Youssef
Rating: 5 stars5 stars5 stars5 stars5 stars / 22
June 13, 2005
TABLE OF CONTENTS:
  1. · Learn CSS, Selectors, part 2
  2. · The Attribute Selector
  3. · Specific-Value Attribute Selector
  4. · The Specific-Values Attribute Selector
  5. · The Begin With Specific-Value Attribute Selector
  6. · The End With Specific-Value Attribute Selector
  7. · The Contain-Value Attribute Selector

print this article
SEARCH DEVARTICLES

Learn CSS, Selectors, part 2 - Specific-Value Attribute Selector
(Page 3 of 7 )

You can apply certain styling rules if the attribute of the element has a specific value. This can be very useful. The syntax is similar to the attribute selector, but you need to include the specific value in quotes, as we will see in the following example.

Here's the CSS code:

a[href="http://www.w3.org"]
{
background-color: black;
color: white;
text-decoration: none;
font-size: 1.1em;
font-family: Tahoma;
}

Here's the HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="Selectors.css" type="text/css">
<title>CSS Selectors</title>
</head>
<body>
<p>You can use CSS with markup languages like HTML, XHTML and XML. All
those markup languages and also CSS has Specifications as the <a
href="http://www.w3.org">W3C website</a>
</p>
<p>The <a href="http://www.w3.org">W3C website </a>
contains specifications for web standards and it's
very useful for web designers, developers and software architectures to
navigate this website. For example, you have the CSS 2.1 Specifications
and the XHTML 1.0 Specifications discussing everything from A to Z about
the technology<br>
</p>
<p></p>
</body>
</html>

 

And here's the result:

As you can see, the CSS code states that every time there's an anchor element with the attribute href, and it has the value http://www.w3.org (the link to the W3C website), it will apply the styles. The syntax is very simple; just use the attribute and the equal sign followed by the string value and you are done. One more thing, you can apply the specific-value attribute selector based on more than one attribute, so you can have something like the following CSS code:

a[href="http://www.w3.org"][target="_blank"]
{
background-color: black;
color: white;
text-decoration: none;
font-size: 1.1em;
font-family: Tahoma;
}

We have added the target attribute's value _blank. You need to add this attribute and its value to the second anchor element in the HTML code, reload the page and you will get the result shown below. Note that the formatting has been applied only to the second anchor element, because it matches the attribute's selector and their values.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials