Learn CSS, Selectors, part 2
(Page 1 of 7 )
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.
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.
Next: The Attribute Selector >>
More Style Sheets Articles
More By Michael Youssef
