Free collection of beautiful vector icons for your web pages.

Lesson 2.5. CSS selectors

Type selectors

When the syntaxe h1 is used in CSS, this is a type selector. It specifies that the style will be applyed to all the <h1> tags.

Any HTML tag can be selected with this syntax, as an example:

/* Styling heading 1 */
h1 { text-align: center; }

/* Styling paragraphs */
p { color:red; }

You can select several tags separated by a comma:

/* Styling headings 1 and 2 */
h1, h2 { text-align: center; }

Tester l'exemple en ligne

ID selectors

The ID selector (#myID) allows you to select tags with a given identifier. Remember that an identifier must be unique on the page. In CSS, this selector is defined by preceding the ID with an hashtag #:

/* Styling tag identified by myId */
#myId { color:red; }

Tester l'exemple en ligne

Class selector

The class selector (` .myClass```) allows you to target all the tags belonging to a given class. A HTML class is defined with the attributeclass =" "`:

<div class="myCLass">Example of division belonging to the class 'urgent'</div>

The advantage of the class selector is to target tags of any types. This selector is defined by preceding the name of the class with a point. Here is an example :

/* Styling the class myClass */
.myCLass { color:red; }

Tester l'exemple en ligne

The attribute selector

The attribute selector ([myAttribute]) makes it possible to target all the tags having a given attribute. The syntax is the name of the attribute between brackets:

/* Select every tag with the 'title' attribute */
[title] { color:red; }

Tester l'exemple en ligne

The attribute selector ([myAttribute = myValue]) optionally allows you to specify a given value for this attribute. Here is an example :

/* Select every tag with the 'title' attribute with value 'cat' */
[title=cat] { color:red; }

Tester l'exemple en ligne

The universal selector

The universal selector * target all the tags in the page:

/* Everything is in red */
* { color:red; }

Tester l'exemple en ligne

Selectors combination

We will not go into details here, but it is possible to combine the selectors between them. The CSS syntax is very powerful and has many features. Here is an example of how to select all tags of type <a> having an attribute of type href =" " whose value starts with https: // lucidar.me:

a[href^="https://lucidar.me"] { color:red; }

Tester l'exemple en ligne

The day you need this type of selector, you will find many websites explaining how to combine selectors.

Pick the right selector

Choosing a selector depends on many factors (page structure, developer habits, libraries used ...). The selection strategy comes with practice and experience. When possible, use selectors of type. If the latter is not appropriate, you should ask yourself the question of link between style and content. For basic layouts, the class selectors are frequently used.

Lesson 2.4 Summary Lesson 2.6

Lesson 2.5. CSS selectors

Type selectors

ID selectors

Class selector

The attribute selector

The universal selector

Selectors combination

Pick the right selector

See also