Home arrow Style Sheets arrow Page 4 - 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 - The Specific-Values Attribute Selector
(Page 4 of 7 )

The specific-values attribute selector is very similar to the specific-value attribute selector. Instead of matching only one value for the element's attribute, this selector matches one of the multiple space separated values like the following:

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

Note the use of the tilde symbol with the equal sign, and the space between the two string values. This selector states that any anchor element that has the href attribute value set to http://www.w3.org or http://www.w3.org/TR/CSS21 will have the above styling rule. Unfortunately, there is no browser support for this selector yet.

The lang value Attribute Selector

Actually, this attribute has been defined for certain behavior. The selector applies the rule if the value of the attribute matches the specified value, or the specified value with added "-". Let's look at an example. Modify the CSS file to look like this:

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

Now modify the first <p> element in the HTML to look like this (just add the lang attribute and set the value to "en-us"):

<p lang="en-us">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>

The selector states that any <p> element that has the attribute lang, that has the value that begins with "en" or "en-" will have blue text. This selector applies the formatting rule if a match of the specified value has been found, or a match of the value plus the "-" symbol like "en" or "en-" has been found. 


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