CSS Selectors are essential ingredients in developing websites. They’re the hooks that our CSS has into our HTML.
We need to also examine as to how many different CSS selector patterns that can be regularly used.
Even though it would be a good idea to take a look at all the 42 different selector patterns that are at our disposal and many which we can potentially use more of often and get away from classitis and avoiding an over-reliance on making selectors more specific. Classitis is the measles of markup, obscuring meaning as it adds needless weight to every page. The affliction dates back to the early days of semi-CSS-capable browsers and the many designers’ initially childish comprehension of how CSS works. Getting away from classitis and over-reliance on making selectors can both turn out to be enemies of maintainability.
Step one will be to consider the following:
- Attribute selectors — for hooking into elements through HTML attributes
- Combinators — for combining selectors to be more specific and powerful
- Pseudo-classes — for elements to help target when certain conditions are met
Let us now begin with a quick look at some simple selectors:
Simple Selectors
Simple selectors include type selectors, the universal selector, attribute selectors, class selectors, ID selectors, and pseudo-classes.
It should, however, be noted that numbers in parenthesis indicate in which level of CSS, the selector has been introduced.
- Type selectors – element name
- Universal selectors – * ns|* *|*
- Class selectors – .classname
- ID selectors – #idname
- Attribute selectors [attr=value]
- Combinators
- Adjacent sibling selectors – A + B
- General sibling selectors A ~ B
- Child selectors A > B
- Descendant selectors A B
- Pseudo-elements
- Pseudo-classes
Usually, the first three types of CSS selectors are commonly used. But the latter part of it is often left unexplored. In the series of articles, let us now focus on learning about Attribute Selectors.
Attribute selectors
Attribute selectors select an element using the particular attribute or attribute value to an HTML element. It matches any element which has an attribute mentioned in the selector. So attribute selector works based on the attribute given to the element.
[attr]Represents an element with an attribute-name of attr.
Ex:span[lang] {font-weight:bold;}
In this example, All spans with a “lang” attribute are bold
[attr=value]Represents an element with an attribute name of attr and whose value is exactly “value”.
Ex: span[lang=”pt”] {color:green;}
In this example, All spans with “lang” attribute value of “green” is applied green text colour.
[attr~=value]Represents an element with an attribute-name of attr whose value is a whitespace-separated list of words, one of which is exactly “value”.
Ex: span[lang~=”en-us”] {color: blue;}
In this example, All spans with “lang” attribute value of “en-us” is applied blue text colour.
[attr|=value]Represents an element with an attribute-name of attr. Its value can be exactly “value” or can begin with “value” immediately followed by “-”
(U+002D). It can be used for language subcode matches.
Ex:span[lang|=”zh”] {color: red;}
In this example, All spans with “lang” attribute value of “zh” is applied red text color. It will also match zh-TW ie., basically any value starting with zh.
[attr^=value]Represents an element with an attribute-name of attr and whose value is prefixed by “value”.
Ex: a[href^=”javascript:”]{color:green;}
In this example all links to urls starting with “javascript” are green, which means that <a href=”javascript:void(0);”>, <a href=”javascript:print();”> all would be applied green text color.
[attr$=value]Represents an element with an attribute name of attr and whose value is suffixed by “value”.
Ex: a[href$=”.cn”] {color: red;}
In this example all links to urls ending in “.cn” are red, which means that <a href=”www.google.cn”>, <a href=”www.yahoo.cn”> all would be applied red text color.
[attr*=value]Represents an element with an attribute name of attr and whose value contains at least one occurrence of string “value” as substring.
Ex:a[href*=”example”] {background-color: #CCCCCC;}In this example all links with “example” in the url have a grey background, which means that <a href=”www.first-example.com”>, <a href=”www.example-test.co.in”> all would be applied #ccc background color.