Code Crypton: attribute selectors

Attribute selectors are used to style items using the attribute of elements rather than targeting tag elements in HTML. This gives you another way or opportunity to style the similar tags with different attributes.

ALSO SEE: Targeting tags within document hierarchy

1. Targeting Attribute

This will simply target the attribute of the tag. So now, the elements under this attribute will be styled accordingly.


<!-- this is HTML -->
<img src="keepcalm.png" width="500" height="300" />
<img src="keepcalm.png" width="500" height="300" title="Keep Calm" />


/* this is CSS */
img[title] {
    border: 3px solid red;
}

Form the above code, you can see that the image with title attribute is styled accordingly to the CSS but the same image without title attribute doesn't.

2. Targeting Exact Value

We now know how to style an element according to its attribute, but we can also style an element according to its attribute values. Let us see how to target exact attribute values,


<!-- this is HTML -->
<p><a href="http://codecrypton.blogspot.in">CodeCrypton - Home</a></p>
<p><a href="http://codecrypton.blogspot.in/p/html.html">CodeCrypton - HTML</a></p>
<p><a href="http://codecrypton.blogspot.in/p/css.html">CodeCrypton - CSS</a></p>


/* this is CSS */
a[href="http://codecrypton.blogspot.in/p/html.html"] {
    background-color: #000;
    color: #fff;
    text-decoration: none;
}

You can also style the webpage according to the attribute values as explained above. The specified value must be exactly equal as in attribute.

3. Targeting value within spaces

As we know to target exact attribute values, let us learn how to target attribute value words within spaces here,


<!-- this is HTML -->
<p title="This blog name is CodeCrypton">Code Crypton is a programming blog that focuses on 
building webpages.</p>


/* this is CSS */
[title~="blog"] {
    background-color: orange;
    color: #069;
    width: 400px;
    padding: 10px;
}

By using the tilde ( ~ ) symbol, now you can target value words that are within spaces.

4. Targeting values within dashes

Now, just like styling attribute values within spaces, now we can style attribute values that are within dashes. Lets learn about that here,


<!-- this is HTML -->
<p title="this-blog-name-is-codecrypton">Code Crypton is a programming blog that fouces on 
building webpages.</p>


/* this is CSS */
p[title|="blog"] {
    background-color: yellow;
    color: #069;
    width: 400px;
    padding: 10px;
}

Now by using the vertical bar ( | ) symbol, we can style the attribute value within dashes.

5. Attribute beginning with certain value

If you remember attribute value starting with certain words, then you can use the caret (^) symbol. See how it works below,


<!-- this is HTML -->
<h1 rel="Code Crypton Programming Blog">Code Crypton</h1>


/* this is CSS */
h1[rel^="Code"] {
    color: #069;
}

6. Attribute ending with certain value

Just like previous example, if you remember attribute value ending with certain words, then you can use the dollar ($) symbol. Look below how it works,


<!-- this is HTML -->
<h1 rel="Code Crypton Programming Blog">Code Crypton</h1>


/* this is CSS */
h1[rel$="Blog"] {
    color: green;
}

7. Targeting certain values somewhere

If you only remember some phrases of value name but don't know the exact position of these phrases inside the value, then follow the code below,


<!-- this is HTML -->
<h1 rel="Code Crypton Programming Blog">Code Crypton</h1>


/* this is CSS */
h1[rel*="programming"] {
    background-color: #333;
    color: rgb(210,233,255);
    width: 215px;
    padding: 10px;
}

When you use the star/multiply (*) symbol, then you can target certain attribute values somewhere inside like the above code.

8. Using multiple attributes

So far, we have only seen styling elements with one attribute. But if needed, you can use even two or more attributes to style an element for better styling.


<!-- this is HTML -->
<h1 rel="multiple" title="attribute selector">Multiple attribute selector</h1>


/* this is CSS */
h1[rel*="multiple"][title$="attribute selector"] {
    color: #069;
    background-color: #fff;
    border: 1px solid orange;
    border-radius: 9px;
    width: 400px;
    padding: 10px;
}

From the above code, you can see how a single element's attributes are used multiple times to style an element.

Most commonly, CSS targets its tags with document hierarchy. While HTML are block of bricks that forms a structure to a webpage, CSS are tools that style those contents. Remember, the whole HTML is a family which has its child, parents, ancestors, etc...

ALSO SEE: Document hierarchy in HTML

<body>

<h1>The warrior of light is <em>not a coward.</em></h1>

<p>The warrior of light is often a victim of Gossip.<em>But, it does not allow him the right 
to defend himself: it condemns without a trial.</em></p>

<p>When this happens, he puts up with consequences and the undeserved punishment, for as he 
well knows, words are powerful.<span>But he suffers in silence and never uses the same 
weapon to hit back at his opponent.<em>The warrior is not a coward.</em></span></p>

</body>

Lets take the above code as example in this post and you can see the document structure which gives the hierarchy clearly.

1. Contextual Selectors

Contextual selectors or descendant selectors are used according to the hierarchical structure of a webpage.

Now to color all the tags, the following style works:


em {color : #069;}

Now to color only the tags which are under tag,


p em {color : #069;}

To color the tag under and tags,


p span em {color : #069;}

You can see from the above examples, how the descendant selectors are used to style a webpage elements. At first it covered all the em tags, then it covered em tags under p tag. At last, the style is only applied to the em element under p and span tags.

2. Child selectors

A child selector applies style to the direct descendant of the element, but not to all its descendants.


p > em {color : #069;}

Though the above code contain em tag under both the paragraphs(p tags), the style is applied only to the first paragraph because it is the direct descendant to it.

3. Universal Selectors

Universal selectors are used to select the overall structure of an element. They are used in CSS with a simple star or multiply symbol for denoting overall elements rather than including every individual elements.

To select every element in HTML,


* {color : #069;}

If the elements are styled specifically, then the universal selector leave those elements and styles the rest of the elements.


em {color : orange;}
* {color : #069;}

Sometimes universal selectors act as an inverse of child selectors.


p * em {color : #069;}

You can see above that the em tag which is the direct descendant of the p tag is left out and the rest of the em tags under p tags are selected to style.

4. Adjacent Sibling Selectors

Adjacent sibling selectors are focused on the sibling elements which share the same parent tag.


h1 + p {color : #069;}

The above code targets the first paragraph(p tag), which has a sibling element of h1 tag. Here the p tag and the elements under it are styled accordingly.


h1 + p + p {color : #069;}

Similarly like in the previous example, the second paragraph(p tag) is targeted here. This element is targeted in the order of heading (h1 tag) followed by the first paragraph (p tag) and then by second paragraph (p tag) which is styled.

ALSO SEE: Learn how to use attribute selector

Pages

November 26, 2012

Attribute selectors in CSS