CSS: Types of Selectors

 what is selectors?

CSS selectors allow you to target specific HTML elements. You can select elements by tag name (e.g., h1, p), class (e.g., .container, .button), ID (e.g., #header, #footer), or other attributes.


There are several important types of selectors in CSS:
1. Element Selector
2. ID Selector
3. Class Selector
4. Pseudo-Class Selector
5. Pseudo-Elements Selector
6. Descendant Selector
7. Child Selector
8. Adjacent Selector
9. General Sibling Selector
10. Attribute Selector

1. Element Selector
The simplest kind of selection targets HTML components based on their tag name.
EX. 
index.html
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>My First WebPage</title>
<link href="./main.css" rel="stylesheet"></link>
</head>
<body>
    <p>PARA 1</p>
    <span>SPAN</span>
    <p>PARA 2</p>
</body>
</html>
main.css
p {
    color: red
}
Output:

Oh no! Fantastic. You used an element selector to implement CSS, but why are PARA1, SPAN, and PARA2 spaces apart? [Blog in progress... will add link here]

2. ID Selector
Targets a single HTML element with a specific id attribute. 
EX.
index.html
...
<body>
    <p id="header">HEADER</p>
    <p>content</p>
</body>
...
main.css
#header {
    color: red;
    font-size: 24px;
}
Output:
3. Class Selector
Targets HTML elements with a specific class attribute.
EX.
index.html
...
<body>
    <p class="highlight">Imp content</p>
    <p>Normal content</p>
    <p class="highlight">Imp content</p>
</body>
...
main.css
.highlight {
    background-color: yellow;
}
Output:

4. Pseudo-Class Selector
It is a keyword that is added to a selector to style an element based on it's state or relation to the document. They are denoted by a colon (:). These states can be :visited (for visited links), :active (when the element is being activated by the user), :hover (when the mouse is over the element), and many more.

Syntax:
selector:pseudo-class {
    /* CSS rules */
}
EX.
index.html
...
<body>
        <img class="my-image" src="https://img.freepik.com/free-photo/abstract-glowing-flame-drops-electric-illumination-generative-ai_188544-8092.jpg"></img>
</body>
...
main.css
.my-image:hover {
    border: 10px solid purple;
    scale: 1.2;
}
Output: (Just try it and you will understand it better)
Before hover:
After hover: purple border is visible with 1.2% scale






5. Pseudo-Elements Selector
It allow you to style parts of an element rather than the element itself. They are denoted by a double colon (::) followed by the name of the pseudo-element.

Pseudo-elements are used to add decorative effects or style specific parts of an element's content.

Syntax:
selector::pseudo-element {
    /* CSS rules */
}
Where selector is the element you want to style, and pseudo-element is the specific part of the element's content you want to target.

EX.
index.html
...
<body>
        <p class="imp-first-line">Lorem ipsum .....</p>
</body>
...
main.css
.imp-first-line::first-line {
    color: rgb(68, 75, 75);
    font-size: 1.2rem;
    font-weight: bold;
}
Output: 


6. Descendant Selector (nested)
The descendant selector in CSS is used to select elements that are descendants of another specified element. It allows you to apply styles to elements based on their relationship within the HTML document tree.

Syntax:
selector descendant-selector {
    /* CSS rules */
}
The descendant selector is denoted by whitespace (a space) between two or more selectors. It targets elements that are descendants of the preceding selector. 

EX.
main.css
div p {
    /* CSS rules */
}
In this example, the descendant selector div p targets all <p> elements that are descendants of <div> elements. It will apply the specified css properties to those paragraphs.

EX.
index.html
...
<body>
        <ul class="menu">
            <li>Home</li>
            <li>About
                <ul>
                    <li>History 
                        <ul>
                            <li>2024</li>
                            <li>2023</li>
                            <li>2022</li>
                        </ul>
                    </li>
                    <li>Team</li>
                </ul>
            </li>
            <li>Services</li>
            <li>Contact</li>
        </ul>
</body>
...
main.css
.menu ul li {
    color: blue;
}
Output: 

7. Child Selector (nested)
It select elements that are direct children of another specified element. It allows you to apply styles specifically to elements that are direct descendants of a parent element, rather than targeting all descendants regardless of their depth in the document tree.

Syntax:
selector>direct-descendant-selector {
    /* CSS rules */
}
The child selector is denoted by the greater than symbol (>), placed between two selectors. It targets elements that are immediate children of the preceding selector.

EX.
index.html
...
<body>
        <ul class="menu">
            <li>Home</li>
            <li>About
                <ul>
                    <li>History 
                        <ul>
                            <li>2024</li>
                            <li>2023</li>
                            <li>2022</li>
                        </ul>
                    </li>
                    <li>Team</li>
                </ul>
            </li>
            <li>Services</li>
            <li>Contact</li>
        </ul>
</body>
...
main.css
.menu>li {
    color: blue;
}
Output: 

















8. Adjacent Selector
It allows you to select an element that is immediately preceded by another specific element. It targets an element that comes directly after another element, sharing the same parent.

Syntax:
selector+immediate-preceded-selector {
    /* CSS rules */
}
The adjacent sibling selector is denoted by the plus symbol (+) and is placed between two selectors. It targets elements that are immediately preceded by the first selector.

EX.
index.html
...
<body>
        <div>
            <p>first para</p>
            <p>second para</p>
            <p>third para</p>
        </div>
        <p>Immediately preceded para</p>
        <p>Not Immediately para</p>
</body>
...
main.css
div+p {
    color: blue;
}
Output: 
















9. General Sibling Selector
It allows you to select elements that are siblings of a specified element, regardless of whether they come immediately after or not. It targets elements that share the same parent and come after the specified element.

Syntax:
selector~immediate-preceded-selector {
    /* CSS rules */
}
The general sibling selector is denoted by the tilde symbol (~) and is placed between two selectors. It selects all sibling elements that come after the first specified element, sharing the same parent.

10. Attribute Selector




Comments

Post a Comment

Popular posts from this blog

Formatting MySQL Dates

Image
MySQL's DATE_FORMAT() function provides a wide range of format codes that you can use to represent date and time values in various formats.  It allows you to format a date or datetime value as a string using custom formatting. DATE_FORMAT(date, format) date: The date or datetime value you want to format. format: A string specifying the desired format for the output. This string can include special format codes that represent various components of the date and time (e.g., %Y for the year, %m for the month, %d for the day, %H for the hour, %i for the minute, %s for the second, etc.). SELECT DATE_FORMAT('2023-09-03', '%M %d, %Y'); // returns 'September 03, 2023'. Here is a list of commonly used format codes along with examples: %Y: Four-digit year (e.g., '2023'). %y: Two-digit year (e.g., '23' for 2023). %m: Month (01-12). %c: Month (1-12). %d: Day of the month (01-31). %e: Day of the month (1-31). %H: Hour (00-23). %h: Hour (01-12). %I: Hou
Read more

SOAP Explained: With Javascript

What is SOAP? SOAP is like a set of rules that helps different computer programs talk to each other. Imagine you have two friends who speak different languages. SOAP is like a universal translator that helps them understand each other. Now, when these programs talk, they use a special type of text called XML. It's like a format that's easy for both programs to read, like having a conversation in a language that both friends understand. So, SOAP is kind of like a language translator for computers, and XML is the language they use to communicate. This way, even if two programs are running on completely different systems, they can still understand each other and share information. SOAP Request A SOAP request consists of a SOAP envelope that contains the SOAP header and the SOAP body. Here's a basic example of what a simple XML request in SOAP might look. <?xml version="1.0" encoding="UTF-8"?> <soapenv:Envelope     xmlns:soapenv="http://schemas
Read more

Mastering MySQL Timestamps

Image
Timestamps in MySQL are used to represent date and time values, and they can store information with various levels of precision. MySQL provides several data types for working with timestamps, including DATE, TIME, DATETIME, TIMESTAMP, and YEAR. Let's focus on the two most commonly used timestamp data types in MySQL : DATETIME and TIMESTAMP . These types store both date and time information, but they have some differences in behavior. 1. DATETIME: The DATETIME data type stores date and time values in the format 'YYYY-MM-DD HH:MM:SS'. It does not automatically convert stored values to the server's time zone. The values are stored as provided. You can specify a time zone when inserting data into a DATETIME column, but the time zone information is not used for calculations. Example: '2023-09-03 14:30:00' 2. TIMESTAMP: The TIMESTAMP data type also stores date and time values in the format 'YYYY-MM-DD HH:MM:SS'. Unlike DATETIME, TIMESTAMP values
Read more