CSS Selectors Basics
CSS selectors are, in a way, how you “talk” to your HTML and tell it what to do. HTML creates the structure for your page — it’s like the walls and floors of a house — but doesn’t add any style on its own. We can say, a CSS selector acts as a pointer or bridge. It also gives a name to a particular part of your HTML page so you can tell the computer how to color it, where to put it on the screen, make it move or even make it disappear! CSS, sans selectors, would be just an arbitrary list of colors and sizes with no meaning.
How to use CSS Selectors CSS Selectors work by targeting the “labels” of your HTML tags. For instance, if you simply want all the paragraphs on your website to appear identical, then you only target <p> tag. But if you’re styling one particular section (say, a “Featured News” box), you use a more-targeted selector that identifies selections by its unique class or ID. This multi-faceted flexibility allows you to keep the code clean and modular. You can author a single rule that impacts thousands of elements, or a very specific rule that modifies key one button.
1. The Basic Selectors
This is the bread and butter of CSS. For example, you can use them most of the time.
Universal Selector (*)
This selector matches all elements on the document. It’s is a well known trick to reset default spacing.
Example:
CSS
{ margin: 0; padding: 0; }
Element (Type) Selector
Selector locates elements by their HTML tag name, like h1, p, or button.
Example: Making all paragraphs blue.
CSS
p { color: blue; }
Class Selector (.)
Selects elements with the given class. Each element can utilise the same class multiple times. It always starts with a dot.
Example:
HTML: <div class="card">...</div>
CSS:
. card { border: 1px solid #000; }
ID Selector (#)
targets one, generated id for html element with more than one html element. IDs can be used only once per page. It all begins with a hashtag.
Example:
HTML: <nav id="main-nav">...</nav>
CSS:
#main-nav { background-color: grey; }
2. Combining Selectors
At times you need to be more precise, such as only selecting the links within a footer.
Grouping (h1, p)
Applies the same styles to both h1 and p.
Descendant (div p)
Finds all <p> elements that are descendants of a div.
Child (div > p)
Only selects <p> elements that are direct descendants of a div.
Attribute ([type=”text”])
Selects elements based on the attribute e.g. text input fields.
3. Pseudo-classes (State-Based Selectors)
Pseudo-classes select elements when they are in a certain state.
:hover
Styles elements when you hover over them with your mouse.
:nth-child(n)
Chooses a particular item in a list (for example, styling alternate table rows).
:focus
Applies styles when the user is on an element, such as a text field, or pressed it.
Example:
CSS
button:hover {
background-color: orange;
cursor: pointer;
}
4. How the Browser Decides (Specificity)
If you make a paragraph red by tag name and green by class, which colour wins? CSS has a priority scheme, called the specificity:
Inline styles (defined directly in HTML) – Strongest
IDs (#)
Classes (.)
Elements (p, h1) – Weakest
Pro Tip: If your CSS isn’t doing what you expect, it’s probably because a more specific (stronger) selector takes precedence over yours.
Check out our resources!
Free E-Books: Download your Free E-Books here.
Bootstrap Templates: Explore our Bootstrap Projects section.
