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

Host Your Node.js App on AWS EC2 Instance for Free in 2024

Image
Contents Introduction Prerequisites Launch an EC2 Instance Prepare the EC2 Instance Connect to the EC2 Instance Install Dependencies and Start Your App in instance terminal Access Your App Run your server in auto mode using pm2 Conclusion 1. Introduction Are you a developer looking to host your Node.js app on a reliable and scalable platform? Amazon Web Services (AWS) offers a variety of services to meet your hosting needs, including EC2 instances. In this tutorial, we will guide you through the process of hosting your Node.js app on an AWS EC2 instance for free using the AWS Free Tier. 2. Prerequisites Before we begin, make sure you have the following prerequisites in place: An AWS account. If you don't have one, sign up for free at https://aws.amazon.com/. Basic knowledge of Node.js.  3. Launch an EC2 Instance 1.      Log in to the AWS Management Console. 2.      Navigate to the EC2 service. 3.      Click on "Launch Instance" to start the instance creation process . 4.
Read more

GitCommandsPro Your Guide to Essential Git Commands in 2024

Image
Table of Content 1 Check git version 2 Configuration Settings 3 Initializing a repository 4 Staging files 5 Viewing the status 6 Committing the staged files 7 Skipping the staging area 8. Removing files 9 Renaming or moving files 10 Viewing the staged/unstaged changes 11 Viewing the history 12 Viewing a commit 13 Unstaging files (undoing git add) 14 Discarding local changes 15 Restoring an earlier version of a file      1.     Check git version git --version 2.     Configuration Settings Levels of defining this settings are System level -  apply to All Users of computer. Global – all repositories of the current user. Local – the current repository. Or a repository in the current folder.           Name  git config --global user.name "YOUR_NAME"          Email git config --global user.email YOUR_MAIL@gmail.com          Default Editor (for setting vscode) git config --global core.editor "code --wait"           To edit all the global settings (will open the d
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