List of Important CSS Selectors You Need To Know

css selectors techhyme

CSS is a separate language with its own syntax. In CSS terminology, the two main sections of a rule are the selector that identifies the element or elements to be affected, and the declaration that provides the rendering instructions. The declaration, in turn, is made up of a property (such as color) and its value (green), separated by a colon and a space.

The most basic type of selector is called an element type selector.

Example:

  • selector { property: value; }
  • selector { property1: value1; property2: value2; property3: value3; }
S.No. Selector Type of Selector Description
1
*
Universal selector Matches any element

* {font-family: serif;}
2
A
Element type selector Matches the name of an element.

div {font-style: italic;}
3
A, B
Grouped selectors Matches elements A and B

h1, h2, h3 {color: blue;}
4
A B
Descendant selector Matches element B only if it is a descendant of element A.

blockquote em {color: red;}
5
A>B
Child selector Matches any element B that is a child of element A.

div.main>p {line-height: 1.5;}
6
A+B
Adjacent sibling selector Matches any element B that immediately follows any element A.

p+ul {margin-top: 0;}
7
.classname
A.classname
Class selector Matches the value of the class attribute in all elements or in a specified element.

p.credits {font-size: 80%;}
8
#idname
A#idname
ID selector Matches the value of the id attribute in an element.

#intro {font-weight: bold;}
9
A[att]
Simple attribute selector Matches any element A that has the given attribute defined, whatever its value.

table[border] {background: white;}
10
A[att=”val”]
Exact attribute value selector Matches any element A that has the specified attribute set to the specified value.

table[border=”3″] {background: yellow;}
11
A[att~=”val”]
Partial attribute value selector Matches any element A that has the specified value as one of the values in a list given to the specified attribute.

table[class~=”example”] {background: yellow;}
12
A[att|=”val”]
Hyphenated prefix attribute selector Matches any element A that has the specified attribute with a value that is equal to or begins with the provided value. It is most often used to select languages, as shown here.

a[lang|=”en”] {background-image: url(en_icon.png);}
13
a:link
Pseudoclass selector Specifies a style for links that have not yet been visited.

a:link {color: maroon;}
14
a:visited
Pseudoclass selector Specifies a style for links that have already been visited.

a:visited {color: gray;}
15
:active
Pseudoclass selector Specifies to any element that has been activated by the user, such as a link as it is being clicked.

a:active {color: red;}
16
:focus
Pseudoclass selector Specifies any element that currently has the input focus, such as a selected form input.

input[type=”text”]:focus {background: yellow;}
17
:hover
Pseudoclass selector Specifies a style for elements (typically links) that appears when the mouse is placed over them.

a:hover {text-decoration: underline;}
18
:lang(xx)
Pseudoclass selector Selects an element that matches the two-character language code.

a:lang(de) {color: green;}
19
:first-child
Pseudoclass selector Selects an element that is the first child of its parent element in the flow of the document source.

p:first-child {line-height: 2em;}
20
:first-letter
Pseudoelement selector Selects the first letter of the specified element.

p:first-letter {font-size: 4em;}
21
:first-line
Pseudoelement selector Selects the first letter of the specified element.

blockquote: first-line {letter-spacing: 4px;}
22
:before
Pseudoelement selector Inserts generated text at the beginning of the specified element and applies a style to it.

p.intro:before {content: “start here”; color: gray;}
23
:after
Pseudoelement selector Inserts generated content at the end of the specified element and applies a style to it.

p.intro:after {content: “fini”; color: gray;}