Web Development

Attribute Selectors

Attribute Selectors
Written by Sandeep Likhar

Attribute Selectors is the section 26 and last section of Beginner’s Guide to CSS.

We came so far in the topic of Selectors in CSS. For the last time we are going to discuss about CSS selectors. But for this last time, it’s not about ids, classes, pseudos and rule types, but about the attributes on the HTML elements. Not all, but for only some specifics.

The attribute selector is used to select elements with the specified attribute. Take a look at the following.

[code language=”html”] Westlife
Backstreet Boys
Boyzone

If you see the anchor tags with target attribute exists, becomes yellow background colored. And in the CSS code, make a note how the attribute was defined using the [ ] marks.

If you like to have a specific value to be selected for the attribute, it also can be done.

[code language=”css”] a[target=_blank] {
background-color: yellow;
}
[/code]
Westlife
Backstreet Boys
Boyzone

 

I guess target attribute is much easier thing to discuss because the values of it are either predefined or single worded. How a about attributes like value or title where the attribute values of it can be unimaginable. If you want to select a element by a single word of the the attribute value, you can use [attribute~=value] syntax.

[code language=”css”] p[title~=My] {
background-color: yellow;
}
[/code] [code language=”html”]

Titanic is a 1997 American epic romantic disaster film directed, written, co-produced, co-edited and partly financed by James Cameron.

Avatar is a 2009 American epic science fiction film directed, written, co-produced, and co-edited by James Cameron.

A.I. Artificial Intelligence, also known as A.I., is a 2001 American science fiction drama film written, directed, and produced by Steven Spielberg

Lincoln is a 2012 American epic historical drama film directed by Steven Spielberg.

When the attribute value words are combined with – marks, and you like to search by first word of the attribute value use the [attribute|=value] syntax.

[code language=”css”] p[title|=My] {
background-color: yellow;
}
[/code] [code language=”html”]

Titanic is a 1997 American epic romantic disaster film directed, written, co-produced, co-edited and partly financed by James Cameron.

Avatar is a 2009 American epic science fiction film directed, written, co-produced, and co-edited by James Cameron.

A.I. Artificial Intelligence, also known as A.I., is a 2001 American science fiction drama film written, directed, and produced by Steven Spielberg

Lincoln is a 2012 American epic historical drama film directed by Steven Spielberg.

This time it select from the prefix of the first word of the attribute value.

[code language=”css”] p[title^=My] {
background-color: yellow;
}
[/code] [code language=”html”]

Titanic is a 1997 American epic romantic disaster film directed, written, co-produced, co-edited and partly financed by James Cameron.

Avatar is a 2009 American epic science fiction film directed, written, co-produced, and co-edited by James Cameron.

A.I. Artificial Intelligence, also known as A.I., is a 2001 American science fiction drama film written, directed, and produced by Steven Spielberg

Lincoln is a 2012 American epic historical drama film directed by Steven Spielberg.

The syntax of the suffix would be [attribute$=value] with the same theory as prefix.

[code language=”css”] p[title$=My] {
background-color: yellow;
}
[/code] [code language=”html”]

Titanic is a 1997 American epic romantic disaster film directed, written, co-produced, co-edited and partly financed by James Cameron.

Avatar is a 2009 American epic science fiction film directed, written, co-produced, and co-edited by James Cameron.

A.I. Artificial Intelligence, also known as A.I., is a 2001 American science fiction drama film written, directed, and produced by Steven Spielberg

Lincoln is a 2012 American epic historical drama film directed by Steven Spielberg.

And the final method we are talking is selecting a element by matching any part of the attribute value. Prefixes, suffixes or in the middle of the attribute value text.

[code language=”css”] p[title*=My] {
background-color: yellow;
}
[/code] [code language=”html”]

Titanic is a 1997 American epic romantic disaster film directed, written, co-produced, co-edited and partly financed by James Cameron.

Avatar is a 2009 American epic science fiction film directed, written, co-produced, and co-edited by James Cameron.

A.I. Artificial Intelligence, also known as A.I., is a 2001 American science fiction drama film written, directed, and produced by Steven Spielberg

Lincoln is a 2012 American epic historical drama film directed by Steven Spielberg.

 

 

This attribute selector really comes handy in creating nice looking poshy forms. See how this text box and button got a smart look.Take a click on the text box below.

[code language=”css”] input[type=text]:focus{
font-family: Trebuchet MS;
font-size: 9pt;
border: 2px solid #FECB7E;
background: #FFFAF2;
}
input[type=button] {
font-family: Calibri;
font-size: 12px;
color: black;
}
[/code]

Long awaited end of the CSS selector topic is end with this section. Here we discussed about the usage of attributes in HTML elements in the CSS arena. With the end of the CSS selector topic, our CSS tutorial is also going to be end. We covered almost all of the areas of the CSS in this long journey. Our next move is to cover the CSS3, which is somewhat an advanced discussion. We’ll meet again with our new companion CSS3. Till then, tune in…

 

HOPE YOU ENJOYED THIS TUTORIAL. PLEASE DON’T FORGET TO SUBSCRIBE FOR NEW UPDATES.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW