List of Important CSS Selectors You Need To Know

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;}

You may also like:

Related Posts