Learning CSS — Chapter 2: An Intro to CSS Selectors
Chapter 1: Up and Running with CSS
Chapter 2: An Into to CSS Selectors
Chapter 3: The Document Object Model
What is a CSS Selector?
A CSS selector is used to determine which element of HTML we would like to style in the CSS document. An element can be selected in many different ways including by tag name, class, id, attribute, etc. and we can also select multiple elements at once. However you choose to select an element, any CSS rules given to that selector will create a pattern of styles which will style each element of that type.
How do I select an Element?
As stated above, there are numerous ways to select an element to style. The first, most basic, way is to select an element by its tag name. This means that nearly any HTML tag can be used. For example, if you would like to change the color and size of you main header, you can simply use h1.
Since there is typically only one h1 tag per HTML document, it is likely that you will not have to worry about this changing anything else on the page. However, if you were to use the paragraph tag (p), then the CSS rules applied to this block would make changes to every paragraph tag on the page. That said, this type of selector is not commonly best practice unless you are trying to make sweeping style changes to the entire document. This leads us into selecting an element by class name.
As you may already know, HTML elements can be given a class attribute with a value or values that are descriptive of that element. Selecting an element by class in a CSS document is done with a period before the class name.
These classes can be applied to multiple elements in an HTML document. That said, class name selectors have a bit of a two pronged approach. The first prong, is when we give the elements we would like to style a class name and then apply the CSS rules to them in the CSS file, like so…
The second prong is a bit more general and takes the approach of creating the rules in CSS first with more general names and then applying those classes where we see fit in the HTML document. For example, instead of selecting every class that we would like to have a light blue background individually, we can create a class first called lightblue-background and then apply it in the HTML on any element we would like to have a light blue background, like so…
Note: In this example, we can see that the light blue background will be applied to the header tag and the first paragraph tag but not the second. I did this to demonstrate the this method is beneficial if you would like to change the background of some elements but not others.
You can see demonstrated above that HTML tags can be given multiple classes. In this case, the first paragraph tag would take on the CSS styling rules of both classes given to it.
As I said before, this is a great method for making style changes to many elements at the same time. However, since class names can be given to multiple elements in and HTML document, you might run into some slip ups when trying to change just one of the elements on the page. This is where id selectors come into play.
Like the class attribute, HTML tags can also be given an id attribute. Unlike classes, these ids should be unique in that each id will only appear one time in the HTML document. For example, if the h1 tag in your HTML document is given an id of “main-header,” then no other tag in the document should be given the id value of “main-header.” When we choose to select an element by an id selector in the CSS document; we can use an octothorp (hashtag, number sign, pound sign, etc.) followed by the id name.
Note: I didn’t really know that was called an octothorp off the top of my head, I was curious so I googled it. The more you know…
Once an HTML element has been given a unique id, we can use the syntax above to select it and apply out desired CSS rules.
Note: In this example, the styling from both the class and the id attributes will be applied to the h1 element. I don’t recommend this color scheme as it is likely painful to look at but you will learn those design problems along the way.
Order of Importance (aka Specificity)
You may not have considered it but what would happen if we had something like this…
In this example, the h1 HTML element has been selected three times in the CSS document and given three different CSS rules to follow. How the HTML document decides which to follow is known as specificity. It considers each type of selector and determines which is most specific. The order of specificity starting with least specific is the type selector (h1), then the class selector (.header-text), leaving the id selector (#main-header) as the most specific selector. This mean that the color of the h1 text would be rendered as red!
What’s Next?
In the next chapter, we will take the time to do a quick review of the Document Object Model (DOM). This will allow us to have a better understanding of what options we have while using these selectors in regards to using multiple selectors at one time, pseudo elements, attribute selectors, and more. Please do not let this overwhelm you. I promise it is more simple than you might imagine. See you there!
