Home arrow Style Sheets arrow Learn CSS, Selectors, part 2

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
  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

Learn CSS, Selectors, part 2
(Page 1 of 7 )

Attribute Selectors

CSS 2 introduced four attribute selectors. CSS 3 introduced three more, so we will be discussing seven attribute selectors in this article. As the name implies, attribute selectors apply certain styling properties to the element (or elements), based on the presence of an attribute or the presence of a certain value in the attribute. Actually, this is very useful in XML as well as HTML, as we will see shortly.

The attribute selectors are not supported by Microsoft Internet Explorer, but they are supported by Mozilla 1.7 and Opera 7.5. As mentioned, CSS 2 introduces four attribute-based selectors. The first one applies the styling properties if a certain attribute exists for the element. The second selector applies the styling properties when the attribute exists and has a certain value. The third one applies the rule if one of the values exists for the attribute, and the fourth one applies the rule if the value of the attribute begins with a specified string.

CSS 3 introduces three more attribute selectors. The first one applies the rule if the attribute value begins with a specific character string (I will explain character strings shortly). The second selector applies the rule if the attribute value ends with a specific character string. The third one applies the rule if the attribute value contains the specific character string. Okay, you may be a little confused now, but don't worry -- we will cover all seven attribute selectors and their syntax, too.

What is a character string? Okay, in programming languages there is a concept called data types. A data type is the representation of data to the computer and to you. Under the hood, computers only understand 0s and 1s, but we need a way to classify the data -- for example, we need to have text, integer numbers, floating numbers and other types of data (but I will not discuss it here as it's not related to CSS at all). Software architects found a way for us to classify the data, so we now have data types. Particularly in CSS, we have the character string data type, integer data type and floating numbers data type.

The character string data type means that we have a string of characters such as "Hello", "Michael", "CSS is fun" and so on. To create a character string value (like "Hello") you need to enclose the value in quotes. To the browser, this means that this is a type of data to escape. In other words, whenever the browser's CSS engine meets a value in quotes, it will not parse it; it will display it as you wrote it even if the character string (which we will call it a string from now on) contains a declaration like this: "font-size: 150%;". The browser will manipulate this value as a string of characters as long as it's quoted. We will discuss the string data type again when we discuss generating content with CSS.

CSS supports two other data types, integers and floating numbers. Integers are those numbers that have no decimal point in their values like 7, 98, 123 but not 89.34; integers are whole numbers. Actually, many CSS properties take integer numbers for their values, and many of them permit the use of the minus sign (-) to state a negative value.

Floating numbers are those numbers that have decimal values like 56.25, 1.25 and so on. We have been using the floating data type for the font-size for a while (like .8em, which means 80% of the default font size). I think that there's nothing special about data types in CSS because they don't give you the ability to manipulate data like programming languages. CSS is meant for Web design only, not for programming anything. Okay, let's begin discussing the attribute selectors.

blog comments powered by Disqus

- 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 

Developer Shed Affiliates


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