Introduction to Selectors

To style an element, we first need to select it, but in CSS, there's quite the panoply of ways to select our elements, and so in this lesson, we're going cover the basic ones, such as selecting elements by their element name, classes, ids, attributes, grouping selectors, and the universal star selector. Then in the next lesson we're going to go over combinator selectors, which are inherently much more complicated.

Selecting by Element Name

To begin, in my styles.css file, we see, I'm currently selecting our h1 element, however in my index.html, if I copy my h1 element, and paste it a couple of times, and save, we see, all of our h1 elements are being made to be blue. This is because, back in my styles.css, by selecting our h1 element like this, we're actually selecting all h1 elements across our entire document. Selecting elements like this is referred to as selecting elements by their element name.

/* styles.css */
h1 {
  color: blue;
}

/* styles.css */
h1 {
  color: blue;
}

<!-- index.html -->
<h1>Heading 1</h1>
<h1>Heading 2</h1>
<h1>Heading 3</h1>

<!-- index.html -->
<h1>Heading 1</h1>
<h1>Heading 2</h1>
<h1>Heading 3</h1>

Selecting by Class

If I instead wanted to select specific h1 elements, what I can do, is back in my index.html, say for example I specifically wanted to select the second h1 element, I can do so by giving it a class attribute.

This attribute allows us to define a class name, which we can then select in our CSS, or even JavaScript.

To select our class, in my styles.css, under my h1 ruleset, I’ll add a dot, because dot notation is how we select classes in CSS, and postfixed against our dot, we follow it up with the name of the class we’re selecting, so in this case, title. Then inside curly braces I’ll give it a color property, and set it to red. When I save, we see, our second h1 element is now red.

<!-- index.html -->
<h1>Heading 1</h1>
<h1 class="title">Heading 2</h1>
<h1>Heading 3</h1>

<!-- index.html -->
<h1>Heading 1</h1>
<h1 class="title">Heading 2</h1>
<h1>Heading 3</h1>

/* styles.css */
h1 {
  color: blue;
}

.title {
  color: red;
}

/* styles.css */
h1 {
  color: blue;
}

.title {
  color: red;
}

Class names, and the styles applied on them, can also be shared across multiple different elements in our HTML. So for example, back in my index.html, I'll give my third h1 element the same class that I gave to my second h1 element, the class name of title, and now that both the second, and third h1 elements are sharing the same class name.. when I save, we see, both headings are now red.

<!-- index.html -->
<h1>Heading 1</h1>
<h1 class="title">Heading 2</h1>
<h1 class="title">Heading 3</h1>

<!-- index.html -->
<h1>Heading 1</h1>
<h1 class="title">Heading 2</h1>
<h1 class="title">Heading 3</h1>

Selecting by ID

Now in addition to selecting specific elements by their class names, we can also select a specific element, by it's ID, with the id selector.

However ID's are meant to be unique. So unlike classes which can be shared across multiple different elements, with an ID, what with them being unique, we ought to avoid having multiple elements share the same ID, and instead, make sure the ID is only being given to one single element.

To demonstrate selecting an element by it's id, on my fourth h1 element, I’ll give it an id attribute. We must give it a name which we can call whatever we want, I’ll call it fourthTitle, and then to select it, in my styles.css file, under our title ruleset, I’ll add a hashtag, because a hashtag is how we select ID's in CSS, and postfixed against our hashtag, we add the name of the id we're selecting, in this case: fourthTitle. Then inside curly braces I’ll give it the color property of green. When I save, we see, our fourth h1 element is now green.

<!-- index.html -->
<h1>Heading 1</h1>
<h1 class="title">Heading 2</h1>
<h1 class="title">Heading 3</h1>
<h1 id="fourthTitle">Heading 4</h1>

<!-- index.html -->
<h1>Heading 1</h1>
<h1 class="title">Heading 2</h1>
<h1 class="title">Heading 3</h1>
<h1 id="fourthTitle">Heading 4</h1>

/* styles.css */
h1 {
  color: blue;
}

.title {
  color: red;
}

#fourthTitle {
  color: green;
}

/* styles.css */
h1 {
  color: blue;
}

.title {
  color: red;
}

#fourthTitle {
  color: green;
}

Selecting by Attributes

We can also select elements by their attributes, for example, in my index.html, under all of our h1 elements, I’ll add an anchor element that says hello world. Now, what I can do, is go back to my styles.css file, under our previous ruleset, I'll add square brackets, because square brackets is how we select elements by their attributes in CSS, and inside the square brackets, we add the name of the attribute we want to select. I want to select all elements with the href attribute, so inside the square brackets, I just need to say href. Inside the curly braces I’ll add a color property of pink, and when I save, we see, our anchor element, which is the only element with the href attribute, is now pink.

<!-- index.html -->
<h1>Heading 1</h1>
<h1 class="title">Heading 2</h1>
<h1 class="title">Heading 3</h1>
<h1 id="fourthTitle">Heading 4</h1>
<a href="#">hello world</a>

<!-- index.html -->
<h1>Heading 1</h1>
<h1 class="title">Heading 2</h1>
<h1 class="title">Heading 3</h1>
<h1 id="fourthTitle">Heading 4</h1>
<a href="#">hello world</a>

/* styles.css */
h1 {
  color: blue;
}

.title {
  color: red;
}

#fourthTitle {
  color: green;
}

[href] {
  color: pink;
}

/* styles.css */
h1 {
  color: blue;
}

.title {
  color: red;
}

#fourthTitle {
  color: green;
}

[href] {
  color: pink;
}

Grouping Selectors

Now if I head over to my index.html, we see, I made my second, and third h1 elements share the same class name so that they can share the same ruleset. However what if I now also wanted my fourth h1 element, with the id attribute, to also share the same ruleset, and be a color of red? To do so, back in my styles.css, instead of changing the color from green to red on my fourthTitle ruleset, what I can do instead, is add a comma after the title class selector, and select our fourthTitle by it's ID, next to it. By adding a comma in between selectors, it is referred to as grouping selectors, and it makes the group being selected share the same ruleset. I'll remove my fourthTitle ruleset since we no longer need it, and when I save, we see, our fourth title is now red.

/* styles.css */
h1 {
  color: blue;
}

.title,
#fourthTitle {
  color: red;
}

[href] {
  color: pink;
}

/* styles.css */
h1 {
  color: blue;
}

.title,
#fourthTitle {
  color: red;
}

[href] {
  color: pink;
}

Universal Star Selector

Now the last selector to finish off this lesson, is the universal star selector. In my styles.css, I’ll delete everything and add the star selector followed by curly braces. This selector is called the universal star selector and it literally just selects everything. So inside curly braces, if I add a color property and set it to pink, and save, we see, every element in our document is now pink.

/* styles.css */
* {
  color: pink;
}

/* styles.css */
* {
  color: pink;
}