W3hobbyist

CSS is a one of the most useful inventions made for the web. However, to style every element, you need to ‘hook’ the style statement to the elements by using selectors. Class and ID of an element(s) are most commonly used for hooking. But there are some lesser known hooks which can function without ‘class’ or ‘id’ hooks. These hooks style elements using other attributes and their values. Eg: A specific hyperlink can be styled using its ‘href’ attribute and its value.

A complete list of CSS selectors is available at w3.org. Another excellent source is Brian Wilson’s page on CSS attribute selectors

Eg: If you need to style internal links differently than external links, then here is how you should do it:

1
2
3
4
5
6

a[href*="yourdomain.com"]
{
font-family: Verdana;
font-size: 12px;
color: #0078B3;
}

Observe precautions because not all selectors belong to the same same CSS version. Some are CSS 2 properties whereas some are available only CSS 3 onwards. A compiled list of CSS versions and their browser compatibility can be found at QuircksMode.org and WebDevOut.