Home arrow Style Sheets arrow Page 2 - 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 Attribute Selector
(Page 2 of 7 )

This is the simplest and most basic attribute selector. You can use it to apply certain styles to an element that has a specific attribute. This can be useful in many ways; for example, in XML the attribute selector can give a style to an element when it has a certain attribute, regardless of this attribute's value. Let's take a look. Below is an XML file (save it as Books.xml) followed by the CSS code (save this file as Selectors.css)

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="Selectors.css"?>
<Books>
<Book>
<title>Programming Microsoft ASP.NET</title>
<Author Rank="5">Dino Esposito</Author>
</Book>
<Book>
<title>Inside C#</title>
<Author>Andrew Whitechapel</Author>
</Book>
</Books>

The CSS code:

Author
{
display: block;
}
Author[Rank]
{
color: Blue;
background-color: YellowGreen;
font-size: .9em;
font-family: Arial, Tahoma;
display: block;
}

 
Open this XML document using a Web browser that supports attribute selectors, such as Mozilla 7.1 or Opera 7.5 (remember, IE doesn't support attribute selectors). You will get the following result:

The XML file contains the root element <Books>, which contains two <Book> elements. The first <Book> element contains the <Author> element, which has the Rank attribute. The following CSS syntax states that every time the <Author> element has the Rank attribute, the element will have a GreenYellow background and a blue color with an Arial font and a size of 90% of the default size font.

Author[Rank]
{
color: Blue;
background-color: YellowGreen;
font-size: .9em;
font-family: Arial, Tahoma;
display: block;
}

The syntax is very simple; after the element name, put the attribute inside brackets and you are done. Note that the second <Book> element doesn't have any style because there's no Rank attribute for this <Book> element. You can apply the styling rule if the element has more than one attribute, but the syntax will be different. Modify the XML document as follows:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="Selectors.css"?>
<Books>
<Book>
<title>Programming Microsoft ASP.NET</title>
<Author Rank="5" Country="Italy">Dino Esposito</Author>
</Book>
<Book>
<title>Inside C#</title>
<Author>Andrew Whitechapel</Author>
</Book>
</Books>

We have added the attribute Country to the <Author> element. Now modify the CSS code as follows:

Author
{
display: block;
}
Author[Rank][Country]
{
color: Blue;
background-color: YellowGreen;
font-size: .9em;
font-family: Arial, Tahoma;
display: block;
}

As you can see, we have added the attribute Country inside [] to the Author attribute selector. If you reload the Web page, you will find the same formatting style. The same applies to HTML; we will see examples in the next sections.


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