CSS Selectors
The element selector finds an HTML element based on the element name like h1, p, span etc. The element selector matches an HTML element directly.
Eg:
All <p> elements on the HTML page will be center-aligned, with blue texts.
p
{
text-align: center;
color: blue;
}
The CSS Id Selector
An HTML element with an id attribute should be the only element on a page with that id value. An id attribute can be used to uniquely identify its element. A CSS id selector contains a "#" immediately followed by the id value.
Eg:
HTML element <p> with id 'para' will have blue texts with a font size of 20 pixels.
#para
{
font-size: 20px;
color: blue;
}
<p id="para">Example</p>
The CSS Class Selector
The class selector finds HTML elements with a specific class attribute.A class selector uses a '.' (dot or period) character to instruct CSS to look for an element that matches the Class that follows it. Unlike id selector, we can use class selector for multiple HTML elements.
Eg:
HTML element <p> with class 'para' will have blue texts with a font size of 20 pixels.
.para
{
font-size: 20px;
color: blue;
}
<p class="para">Example</p>
We can specify that only certain HTML elements are affected by a class. Also, HTML elements can refer to more than one class.
Eg:
HTML element <p> with class 'para' will have blue texts with a font size of 20 pixels.
p.para
{
font-size: 20px;
color: blue;
}
<p class="para">Example</p>
The CSS Universal Selector
The universal selector, '*', matches the name of any HTML element. It matches all elements in an HTML document.
Eg:
This CSS rule will affect every HTML element on the page.
* {
font-size: 20px;
color: blue;
}
The CSS Grouping Selector
A selector doesn't have to match only a single element. The grouping selector finds all the HTML elements with the same style definitions. Grouping the selectors minimizes the code.To group different selectors, separate each selector with a ',' (comma).
Eg:
h4,p,div
{
font-size: 20px;
color: blue;
}
All h4, p and div elements will have blue texts with a font size of 20 pixels.
Pseudo-Classes Selectors
Pseudo-class selectors are CSS selectors with a colon (:) after them. CSS pseudo-class is a keyword added to a selector that mentions a special state of the selected HTML elements. When a user points to an object on a web page with a mouse, it is helpful if that object is highlighted in some way. For example,we can change the style of an HTML element when a user hover the mouse over it.
Syntax:
Selector:Pseudo-class
{
Property: Value;
}
Eg:
a:hover { color: red; }
When the user hovers the mouse over a link (anchor tag <a>), link text becomes red. Once the mouse leaves, link text is reinstated to the previous colour.
Many web browsers provide some visual indication of which element currently has been focused, but in some of the leading browsers this is simply a thin dotted line that is very difficult to see, when the background colour covers it. Pseudo-classes help by responding in some way as the user moves their mouse on the web page.
Link (Anchor) Related Pseudo-classes
- :link – Selects links that are not visited yet.
- :visited – Selects links that have been visited already by the current browser.
- :hover – When the user hovers the mouse over a link, this will select it.
- :active – Selects the link when it is activated by the user (Eg: when the user clicks on the link with the mouse, the link is said to be in active state and immediately changes when the mouse click is removed).
Input related Pseudo-classes
- :focus - It represents an element (such as an input textbox) that has received focus.
- :checked - It selects the input checkbox or radio button which is checked.
- :enabled – Selects inputs that are in the default state of enabled and ready to be used.
- :disabled – Selects inputs that have the disabled attribute.
Tree-structural Pseudo-classes
- :root – The :root selector matches the document's root element. In HTML, the root element is always the <html> element.
- :first-child – Selects the first element within a parent.
- :last-child – Selects the last element within a parent.
- :nth-child() – Selects elements based on a simple provided algebraic expression
- :nth-of-type() – Works like :nth-child, but used in places where the elements at the same level are of different types.
- :first-of-type – Selects the first element of this type within any parent.
- :last-of-type – Selects the last image inside the first div and the last image inside the second div.
- :nth-last-of-type() – Works like :nth-of-type, but it counts up from the bottom instead of the top.
- :nth-last-child() – Works like :nth-child, but it counts up from the bottom instead of the top.
- :only-of-type – Selects only if the element is the only one of its kind within the current parent.
Relational pseudo class selectors
- :not() – Removes elements from an existing matched set that match the selector inside the parameter of :not().
- :empty – Selects elements which contain no text and no child elements.
Text-related pseudo class selectors
- ::first-letter – Selects the first letter of the text in the element.
- ::first-line – Selects the first line of text in the element.
- :lang – Will match anything that either has or is a descendant of an element with a matching lang attribute. For example, it selects and styles every <p> element with a lang attribute value equal to "it" (Italian).