CSS Selectors Cheat Sheet
A CSS selector is a CSS rule set that selects the content which you want to style. There are different kinds of selectors available,
Selectors are used to targeting the HTML elements on our web pages that we want to make style.
Different Types of selectors
- Universal Selector
- Element Type Selector
- ID Selector
- Class Selector
- Descendant Combinator
- Child Combinator
- General Sibling Combinator
- Adjacent Sibling Combinator
- Attribute Selector
The universal selector is the same as a wildcard character, will select all elements on a page. Every page is built by the HTML tags. Each tag represents an element on the page. Following CSS example, uses the universal selector
ELEMENT TYPE SELECTOR:
Element Type Selector is a selector that matches the name of a document element type. This selector element matches instance of the element in the document tree.
Example for Element Type Selectors:
ID selector is declared by using a hash symbol (#) preceding a string of characters. The selector matches any HTML element that has an ID attribute with the same value as that of the selector, but minus the hash symbol
The class selector is very important of all CSS selectors. It’s declared with a dot(.). Same as an ID selector, this string of characters is defined by the developer. The class selector matches all elements on the page that have their class attribute.
Take the following rule set:
The descendant combinator combines two or more selectors. So that you can be more specific when you are in selection method.
Child combinator is same as a selector that uses a descendant combinator, But it only targets immediate child elements only:
#container > .box
GENERAL SIBLING COMBINATOR:
General sibling combinator matches the elements based on the sibling relationships. The selected elements are in the HTML.
General sibling combinatory selector is declared using the tilde character (~).
ADJACENT SIBLING COMBINATOR:
Adjacent sibling combinator uses the plus symbol (+) and is same as the general sibling selector. The difference is that the targeted element must be an immediate sibling, not just a general sibling.
Let’s see the example for Adjacent Sibling Combinator:
This Attribute selector targets elements based on and/or value of HTML attributes, and is declared using square brackets :
No space before the opening square bracket unless you intend to use it along with a descendant combinator.
A pseudo-class uses a: character to identify a pseudo-state
For example, the state of being covered, or the state of being activated.
Let’s look at an example of Pseudo class:
CSS has a selector referred to as a pseudo-element and, used appropriately, it can be very useful. The only difference is that this selector is quite different from the other examples.
Let’s see a pseudo-element in context: