CSS Selector Tutorial: Learn CSS Selector basic concept, Different Type of CSS Selectors, CSS Selectors Reference Guide, Know what is CSS Element Selectors, CSS ID Selectors, CSS Class Selectors, and CSS Selectors Examples. In this page to learn the CSS Selectors definition, the Purpose of using CSS Selectors, and how to use CSS Selectors on a web page with examples. Follow and Like us on Facebook, Twitter, LinkedIn, Pinterest for the latest posts.
What are CSS Selectors?
CSS Selector: helps to select or find an element for manipulation in a HTML document.
Some commonly used selector types are:- Element selector: To select an element using the element name.
Example: use of CSS Element Selectorsbody {
background-color: #bbb; text-align: left;
}
h1 {
color: #eee; text-align: left;
}
p {
font-family: “Arial”; font-size: 20px;
}
body, h1 and p are element selectors.
- Id Selector: To select an element using specific Id.
Example: use of CSS ID Selectors#body-bg {
background-color: #bbb; text-align: left;
}
#heading {
color: #eee; text-align: left;
}
#content-paragraph {
font-family: “Arial”; font-size: 20px;
}
#body-bg, #heading and #content-paragraph are ID selectors.
- Class: To select an element using Class name of an element.
Example: use of CSS Class Selectors
.body-bg {
background-color: #bbb; text-align: left;
}
.heading {
color: #eee; text-align: left;
}
.content-paragraph {
font-family: “Arial”; font-size: 20px;
}
.body-bg, .heading and .content-paragraph are Class selectors.
- Type Selector: To select an element by type (like input type text or submit.)
Example: use of CSS Input Type Selectorsinput[type=”text”] {
background-color: #bbb; text-align: left;
}
input[type=”submit”] {
color: #eee; text-align: center;
}
input[type=”reset”] {
font-family: “Arial”; font-size: 20px;
}
input[type=”text”], input[type=”submit”] and input[type=”reset”] are input type selectors.
- Attribute Selector: To select an element by attributes.
Example: use of CSS Attribute Selectors
a[target] {
background-color: #bbb; text-align: left;
}
a[target] Attribute selectors.
A Complete List of CSS selectors, updated with new CSS3 selectors
| Selectors Type | Description |
|---|---|
| .class_name | Selects elements of the specified class_name. |
| #id_name | Selects elements of the specified value for the id attribute. |
| * | Selects all elements. |
| Element | Selects all occurrences of the element |
| <selector> <selector> | Selects elements that match the second selector and that are arbitrary descendants of the elements matched by the first selector. |
| <selector> > <selector> | Selects elements that match the second selector and that are immediate descendants of the elements matched by the first selector. |
| <selector> + <selector> | Selects elements that match the second selector and that immediately follow an element that matches the first selector. |
| <selector> ~ <selector> | Selects elements that match the second selector and that follow an element that matches the first selector. |
| [attr] | Selects elements that define the specified attribute, regardless of the value assigned to the attribute. |
| [attr=”val”] | Selects elements that define attr with value val |
| [attr~=”val”] | Selects elements that define attr and whose value for this attribute contains multiple values, one of which is val |
| [attr|=”val”] | Selects elements that define attr and whose value , oneis a hypen-seperated list of the values, the first of which is val |
| [attr*=”val”] | Selects elements that define attr and whose value for this attribute contains string val |
| [attr$=”value”] | Selects elements that define attr and whose value for this attribute ends with string val |
| :link | Selects link elements |
| :visited | Selects link elements the user has visited |
| :active | Selects elements that are presently activated by the user. This usually means elements that are under the pointer when the mouse button is pressed. |
| :hover | Selects elements that occupy the position on screen under the mouse pointer |
| :focus | Selects the element that has the focus |
| ::first-line | Selects the first line of a block of text |
| ::first-letter | Selects the first letter of a block of text |
| :first-child | Selects elements that are the first children of their containing elements |
| :before | Inserts content before the selected element |
| :after | Inserts content after the selected element |
| :lang(language) | Selects elements based on the value of the lang attribute |
| :first-of-type | Selects an element that is the first sibling of its type |
| :last-of-type | Selects an element that is the last sibling of its type |
| :only-of-type | Selects elements that are the sole element of their type defined by the containing element |
| :only-child | Selects elements that are the sole element defined by their containing element |
| :nth-child(n) | Selects elements that are the nth child of their parent |
| :nth-last-child(n) | Selects elements that are the nth from last child of their parent |
| :nth-of-type(n) | Selects elements that are the nth child of their type defined by their parent |
| :nth-last-of-type(n) | Selects elements that are the nth from last child of their type defined by their parent |
| :last-child | Selects elements that are the last children of their containing elements |
| :root | Selects the root element in the document. |
| :empty | Selects element that contain no child elements |
| :target | Selects the element referred to by the URL fragment identifier |
| :enabled | Selects elements that are in their enabled state |
| :disabled | Selects elements that are in their disabled state |
| :checked | Selects elements that are in a checked state |
| :not(selector) | Negates a selection(for example, selects all elements that are not matched by selector) |
Web Design Reference Guide Android App for Website Developers
Web Design Reference Guide Android App: Web Design Tutorial App is a tutorial and reference-based app. It provides Web Design Tutorial and Reference to Web Designers or Web Developers to grow their Web Development skills.