CSS Basic Selectors

Element Selector:

Element Selectors are applied to elements in a style sheet to apply a set of properties to that element. e.g., applying the color white to the font of all content excapsulated with the "p" element. An element selector is represented by the element it will modify and followed by a bracket and the properties it will modify.

Group Selector:

Group Selectors are the same as Element Selectors, expect that on the style sheet, multiple elements are placed in the same place on the sheet so that the different elements have the same properties applied to them. A group selector is represented by the elements it will modify and followed by a bracket and the properties that will modify said elements.

Descendant Selector:

Descendant Selectors are used to apply the same properties to elements that have a common ancestor. this allows multiple lists under the same div, to be styled the same way, if that is what you want. A Descendant selector is represented by the "ancestor selector" followed by the remaining "descendant" selectors and a bracket and the properties that will modify the elements.

Class Selector:

Class Selectors selects elements with a specific class attribute. This allows you to specify HTML elements that you want to be affected by certain properties within that class. Though classes are written out in the style sheet, the class must be specified inline with the specific element that you want to take on the property or properties of that class. A class selector is represented by the syntax: ".class" followed by a bracket and the properties that the class will modify.

ID Selector:

What makes attributes of type ID special is that no two ID attributes can have the same value. No two ID selectors can have the same properties modifying them. The ID attribute of a document language allows authors to assign an identifier to one element in the style sheet. An ID selector is represented by the symbol: "#" followed by a bracket and the properties that will be modified.

Universal Selector:

Universal Selectors selects elements of any type. Changing the font color using a universal selector changes the font color of all elements where that style sheet is applied. A universal Selector is represented by the symbol: "*" followed by a bracket and the properties that we want to modify all elements.

Pseudo Selectors:

A pseudo selector selects elements that are in a specific state, e.g. the elements must be acted upon before the pseudo selctor will act on it. Things like hovering with a mouse or clicking with a mouse. Visited or unvisited links can be styled by pseudo selectors. A pseudo selector is represented by the syntax: "selector:pseudo-selector" followed by a bracket and the properties that will be modified.

Pseudo Elements:

A pseudo element is a keyword added to a selector that allows you to style a specific part of selected element. It alows you to style a specific part of an element that may have already styled itself. A pseudo element is represented by the syntax: "selector::pseudo-element" followed by a bracket and the properties that will be modified.

Order of Specificity from lowest specificity to highest specificity:

Elements, Class, ID

Go to Top