The amazing power of CSS – selectors and attribute selectors

Selectors are one of the most important aspects of CSS as they are used to „select and style” elements on an HTML page.

Attribute selectors let you target an element based on its attributes. You can specify the element’s attribute only, so all the elements that have that attribute, whatever the value, within the HTML will be targeted.

Because of the lack of support from older browsers, css selectors like (+,>, ~), and attribute selectors („^”, „*”, „$”,„~”,„|”) were neglected. In many cases these selectors are very useful and time-saving, also, you don’t have to wory about browser compatibility since all new major browsers have native support for these selectors.

How to use CSS Selectors („+”, „>”, „~”)

As a designer, I often come across situations when I need to style some elements without having any classes, ID or access to a particular group of code. In this cases, I find it very useful to use CSS selectors, like „+”, „>” and „~”. Here is a very simple piece of code to exemplify the use of (+,> and ~) in CSS selector and their differences:

 

First Paragraph

 

 

Child Paragraph

 

 

Second Paragraph

 

Third Paragraph

 

+ Sign

It is Adjacent sibling combinator. The selector matches the second child element on the first level. In this case the second <p> inside the <div> child is excluded.

In my example, it will target Second Paragraph only.

> Sign

It is a child selector and targets all the first level children of a certain element.

In my example, this will affect al <p>’s tags except „Level 2 – First Paragraph” which a level 2 child.

~ Sign

Very similar with „>” sign, it is a general sibling combinator. The difference is that the second selector doesn’t have to be immediately followed by the first one.

In this case will affect all <p>’s tags except first paragraph and child paragraph.

Attribute Selectors („^”, „*”, „$”,„~”,„|”)

It is possible to style HTML elements that have specific attributes, not just classes and ids. Attribute selectors are supported by all modern browsers, even by IE7 and IE8 if a !DOCTYPE is specified. The attribute selectors are particularly useful for styling forms.

How to use attribute selectors

^ Selector

will select all attributes that begin with a certain value.

For example, you want to style every single link to a specific site diferent than other links:

a[href ^="http://zitec.com"]{
	color: #676767;
	text-decoration: underline;
}

This will affect all links to http://zitec.com but will also apply the style to any subpages of zitec.com.

* Selector

means “match the following value anywhere in the attribute value”.

Classes and IDs are attributes too, and can be used used with attribute selectors. So let’s say you were writing CSS for a site where you couldn’t control the markup and you have three DIVs you need to target:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 

Aliquam tempus adipiscing metus, ac viverra mi molestie a.
div[id *="post"]{
	color: red;
}

$ Selector

will select all attributes that end with a certain value.

Let’s say you have something similar with this:









and you need to style first name and last name inputs diferent than email input. In this case you can use $ selector to style only inputs that had name attribute end with „name”:

input[name $="name"]{
	border: 1px solid red;
}

~ Selector

will select attributes separated by space.

You probably already knew that you could apply multiple classes to elements, right? Well if you do that, you can still use .class-name in CSS to target any one of them. Attribute selectors aren’t that easy. If your rel attribute has multiple values (e.g. values in a space separated list) you’ll need to use “~=”:

HTML

Attribute Space Separated

CSS

h1[rel ~="space"]{
	color: red;
}

| Selector

will select attributes separated by dash.

This will select if the start of a dash-separated list of attribute values matches the selector. Not particularly useful, since [attr^=value] also does that.

Browser Compatibility

All the above examples work in all modern browsers: Safari, Chrome, Opera, IE and Firefox. Internet Explorer has perfect support for all of these down to version 7, but no support in 6.

by Bogdan Ungureanu

One response to “The amazing power of CSS – selectors and attribute selectors”

  1. Razvan says:

    Nice!

    Am folosit ceva-ceva din selectori, dar in general lucrez cu clase sau jQuery ca sa ajung sa stilizez elemente mai “greu” accesibile.

    Bun articol. Merci.

Leave a Reply

Your email address will not be published. Required fields are marked *