We’d be embarking on a blind journey by diving into the world of CSS selectors without getting to know what exactly a CSS selector is. A selector in CSS is simply used to target and pick out specific HTML elements with the sole purpose of applying styles to them. Without CSS selectors, it’d be practically impossible to implement designs on HTML elements and this means that none of the beautiful websites we have around today would have existed.
There are several types of CSS selectors. The following are some of them:-
The Universal Selector.
The universal selector is a type of CSS selector that always apply styles to all the elements in the HTML document. Web browsers add default styles such as padding and margin to HTML elements, the universal selector comes in handy in situations like this by helping you maintain a consistent style for your HTML document. The universal selector is represented using the asterisk (*) symbol.
* {
margin: 0;
padding: 0;
}
This rule would apply a margin and padding of 0 to all the elements including <html>, <body>, <div> and all others.
The Element Selector.
The element selector is a type of CSS selector that target HTML elements based on their tag names. For instance, you can use the element selector to add styles to all the heading one (h1) elements in your HTML document. You simply need to specify the tag name of the HTML element you intend to style.
h1 {
color: red;
background-color: aqua;
}
The element selector applies styles to all the HTML elements that match the tag name and can result in having styles on more HTML elements than you intended.
The ID Selector.
The ID selector points at HTML elements based on their ID attribute. The ID attribute simply gives HTML elements a peculiar identity and this can be used to advantage while writing CSS. To make use of the ID selector, you write out the ID attribute name with the hash (#) symbol as a prefix.
#boat {
font-size: 10px;
}
In my opinion, it is best to ensure that a particular ID attribute name is used only for a single HTML element. If need be that more than one HTML element requires the same styles, opt for a class attribute instead.
The Class Selector.
The class selector is a type of CSS selector that allows you to pick out HTML elements based on their class attribute. To make use of the class selector, you write out the class attribute name with the period (.) symbol as a prefix.
.class {
text-align: right;
}
More than one HTML element may carry a particular class attribute name, the class selector goes on with adding styles to all of them. The style won't apply to HTML elements without the class attribute name.
The Descendant Selector.
The descendant selector targets elements that are descendants of other elements in the HTML document. This works by calling the parent element and its corresponding descendant element with a space in between.
div p {
font-family: Verdana;
}
The CSS rule above would be evident on all the paragraph elements inside the div element. There is a chance to be more specific by combining the descendant selector with other selectors such as the class selector.
div .para {
font-family: Verdana;
}
CSS selectors aren’t in any way limited to the aforementioned but it’s a good start to your journey into the world of CSS selectors.