In CSS, selectors are patterns used to select the element(s) we want to style.
When we add styles for a web page,we can use tag names, class, id, pseudo classes and attribute values in selectors. This allows your rules to be more specific. Two attributes have special status for CSS. They are Class and ID.
What are CSS Selectors?
We’ll see the CSS selectors and its explanations.
CSS Selectors-Class selectors
Use the class attribute in an element to assign the element to a named class. It is up to you what name you choose for the class. Multiple elements in a document can have the same class value. In your stylesheet, type a dot (.) before the class name when you use it in a selector.
Example
.myclass {
//style rules here..
}
CSS Selectors-ID selectors
Use the id attribute in an element to assign an ID to the element. The ID name must be unique in the document. We can use any meaningful name for the ID, that will make easy while debugging. A hash (#) followed by a name is used for ID selector in CSS.
Example
#myId {
//style rule here...
}
CSS Selectors-Pseudo-classes selectors
A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. Pseudo-classes allow you to format items that are not in the document tree. Pseudo-classes, together with pseudo-elements, let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on some form elements), or the position of the mouse (like :hover which lets you know if the mouse is over an element or not).
Pseudo classes are:
:link
:visited
:hover
:active
:focus
:lang(n)
Example
a {}
a:link {}
a:visited {}
a:hover {}
a:active {}
CSS Selectors-Descendant selectors
Descendant selectors are used to select elements that are descendants of another element in the document tree.
Example
ul li span {
}
Child Selector
A child selector is used to select an element that is a direct child of another element (parent). Child selectors will not select all descendants, only direct children.
Example
div > p { color: red; }
CSS Selectors-Universal Selectors
What is * in css? Universal selectors are used to select any element. Following is an example for universal selector. This rule set will be applied to every element in a document:
* {
margin: 0;
padding: 0;
}
CSS Selectors-Attribute selectors
All HTML elements can have associated properties, called attributes. These attributes generally have values. Any number of attribute/value pairs can be used in an element’s tag – as long as they are separated by spaces. Attribute selectors are used to select elements based on their attributes or attribute value.
Example
a[href="#myId"] { color: #000; }
img[alt~="small"] { border: 1px solid #000; }
CSS Selectors-Adjacent sibling selectors
Adjacent sibling selectors will select the sibling immediately following an element.
Example
Heading 2
Heading 3
This is text
h2 + h3 {margin: -1em; }
CSS Selectors-Pseudo-elements
Pseudo-elements allow us to style information that is not available in the document tree. For instance, using standard selectors there is no way to style the first letter or first line of an element’s content.
p:first-line {font-weight: bold; }
p:first-letter {font-size: 30px; font-weight: bold; }
