Here is the explanation of Name ,ID and Class Selectors:
In CSS, selectors are used to target and style specific HTML elements. Three commonly used types of selectors are:
- Element Selector:
- Targets HTML elements based on their tag name.
- Example:
p
selects all<p>
(paragraph) elements.
- ID Selector:
- Targets a specific HTML element with a unique identifier (ID).
- Syntax:
#id-name
- Example:
#header
selects the HTML element with the ID attribute set to “header.”
- Class Selector:
- Targets HTML elements based on their class attribute.
- Syntax:
.class-name
- Example:
.highlight
selects all elements with the class attribute set to “highlight.”
Combinators Selectors:
In CSS, combinators selectors are used to define relationships between different elements and apply styles based on these relationships. There are several types of combinators, each serving a specific purpose. Here are the main combinators:
Descendant Selector:
- The descendant selector selects all elements that are descendants of a specified element.
- Syntax:
ancestor descendant
- Example:
ul li
selects all<li>
elements that are descendants of a<ul>
.
Child Selector:
- The child selector selects all direct children of a specified element.
- Syntax:
parent > child
- Example:
ul > li
selects all<li>
elements that are direct children of a<ul>
.
Adjacent Sibling Selector:
- The adjacent sibling selector selects an element that is immediately preceded by a specified element.
- Syntax:
prev + next
- Example:
h2 + p
selects the<p>
element that directly follows an<h2>
.
General Sibling Selector:
- The general sibling selector selects all elements that are siblings of a specified element and share the same parent.
- Syntax:
prev ~ siblings
- Example:
h2 ~ p
selects all<p>
elements that are siblings of an<h2>
and share the same parent.
Pseudo – class Selectors
In CSS, pseudo-classes are used to select and style elements based on their state or position within the document. Pseudo-classes are preceded by a colon (:
) and can be applied to various HTML elements. Here are some common pseudo-classes:
:hover:–
- Selects and styles an element when the user hovers over it with the mouse.
- Example:
a:hover
selects and styles anchor links when they are hovered.
:active:–
- Selects and styles an element when it is being activated (clicked).
- Example:
button:active
selects and styles buttons when they are being clicked.
:focus:–
- Selects and styles an element when it has focus (e.g., when tabbing through form elements).
- Example:
input:focus
selects and styles input fields when they have focus.
:first-child:–
- Selects and styles an element that is the first child of its parent.
- Example:
li:first-child
selects and styles the first<li>
element in a list.
:last-child:–
- Selects and styles an element that is the last child of its parent.
- Example:
p:last-child
selects and styles the last<p>
element in a container.
:nth-child():–
- Selects and styles elements based on their position within their parent.
- Example:
ul li:nth-child(odd)
selects and styles odd-numbered<li>
elements in a list.
Attribute Selectors
Attribute selectors in CSS allow you to target HTML elements based on the presence or value of their attributes. There are different types of attribute selectors that you can use.
Here are some examples:
Attribute Presence Selector ([attribute]
): Selects elements that have a specific attribute, regardless of its value.
Attribute Value Selector ([attribute=value]
): Selects elements that have a specific attribute with a certain value.
Attribute Contains Selector ([attribute*=value]
): Selects elements where the attribute contains a specific value anywhere within it.
Attribute Starts With Selector ([attribute^=value]
): Selects elements where the attribute starts with a specific value.
Attribute Ends With Selector ([attribute$=value]
): Selects elements where the attribute ends with a specific value.
Attribute Value Prefix Selector ([attribute|=value]
): Selects elements where the attribute value is either exactly the specified value or starts with the specified value followed by a hyphen.