7 CSS Selectors
Uploaded by
yannickngwa8447 CSS Selectors
Uploaded by
yannickngwa844Web Programming I
CSS Attribute Selector
CSS attribute Selector allows you to select elements based on the presence, value, or specific
characteristics of their attributes. They are particularly useful for dynamic or structured content
where attributes play a key role, such as in forms or data tables.
Types of CSS Attribute Selectors
1. [attribute] Selector
This selector matches all elements with the specified attribute, regardless of its value.
Example
<html>
<head>
<style>
/* Styles all elements with a 'placeholder' attribute */
[placeholder] {
border: 2px solid blue;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your name">
<input type="password" placeholder="Enter your password">
</body>
</html>
2. [attribute=”value”] Selector
This selector matches elements with an attribute whose value is exactly equal to the specified
value.
Example
<html>
<head>
<style>
/* Styles the button with type="submit" */
Web Programming I
[type="submit"] {
background-color: green;
color: white;
}
</style>
</head>
<body>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</body>
</html>
3. [attribute~=”value”] Selector
This selector matches elements where the attribute’s value is a space-separated list of words and
one of the words matches the specified value.
Example
<html>
<head>
<style>
/* Styles elements where class includes 'green' */
[class~="green"] {
border: 3px solid red;
}
.box {
height: 100px;
width: 100px;
position: relative;
background-color: green;
}
.container {
Web Programming I
display: flex;
height: 500px;
width: 100vw;
gap: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="box large green"></div>
<div class="box small red"></div>
</div>
</body>
</html>
4. [attribute|=”value”] Selector
This selector matches elements whose attribute value is either exactly value or starts with value
followed by a hyphen (-). It is often used for language attributes.
Example
<html>
<head>
<style>
/* Styles elements with lang="en-US" or lang="en-GB" */
[lang|="en"] {
color: blue;
}
</style>
</head>
<body>
<p lang="en-US">Hello</p>
Web Programming I
<p lang="en-GB">Hello</p>
<p lang="fr">Bonjour</p>
</body>
</html>
5. [attribute^=”value”] Selector
This selector matches elements whose attribute value starts with the specified value.
Example
<html>
<head>
<style>
/* Styles links with href starting with 'https' */
[href^="https"] {
text-decoration: underline;
color: darkgreen;
}
</style>
</head>
<body>
<a href="https://example.com">Visit Example</a>
<br>
<a href="mailto:contact@example.com">Email Us</a>
</body>
</html>
6. [attribute$=”value”] Selector
This selector matches elements whose attribute value ends with the specified value.
Example
<html>
<head>
<style>
Web Programming I
/* Selects all elements whose class ends with "box" */
[class$="box"] {
border: 2px solid blue;
padding: 10px;
background-color: lightgray;
}
</style>
</head>
<body>
<div class="small-box">This is a small box</div>
<div class="large-box">This is a large box</div>
<div class="circle">This is not a box</div>
</body>
</html>
7. [attribute=”value”] Selector*
This selector matches elements whose attribute value contains the specified value anywhere
within it.
Example
<html>
<head>
<style>
/* Selects all div elements where class contains "box" */
div[class*="box"] {
background-color: lightgreen;
color: darkgreen;
padding: 20px;
border: 2px solid green;
}
</style>
Web Programming I
</head>
<body>
<div class="small-box">This is a small box</div>
<div class="large-box">This is a large box</div>
<div class="circle">This is not a box</div>
</body>
</html>
8. Combining Attribute Selectors
You can combine multiple attribute selectors to refine your targeting.
Example
<html>
<head>
<style>
/* Styles inputs that are both type="text" and data-required="true" */
[type="text"][data-required="true"] {
background-color: green;
}
</style>
</head>
<body>
<input type="text" data-required="true">
<input type="password" data-required="true">
</body>
</html>
Practical Use Cases
• Styling Forms Dynamically: Attribute selectors are excellent for targeting form fields
based on attributes like type, required, or disabled.
• Customizing Links: Target links with specific href patterns, such as links to external
sites or mailto links.
Web Programming I
• Language-Specific Styling: Apply styles based on language attributes, ideal
for multilingual websites.
• Dynamic Content Styling: Use data-* attributes for custom behaviors and styles in
JavaScript-heavy applications.
CSS #id Selector
The ID selector in CSS is used to select a single element on a page by referencing its id attribute.
This attribute must be unique within a page, meaning no two elements can have the same id. The
ID selector is prefixed with a hash (#) symbol in CSS.
Basic ID Selector
The ID selector allows you to style a specific element by targeting its unique id attribute.
This is perfect for applying custom styles to an element that only appears once on the page.
Example
<html>
<head>
<style>
#header {
color: blue;
font-size: 24px;
text-align: center;
}
</style>
</head>
<body>
<div id="header">Header Content</div>
</body>
</html>
Syntax
#elementId {
/* styles */
}
Web Programming I
Where element Id is the value of the id attribute on the HTML element you want to target.
How Does the ID Selector Work?
The ID selector is extremely specific because the id attribute is unique within a page.
Therefore, using the #id selector is an efficient way to target a single element for styling.
This specificity also means that the styles applied using an ID selector will generally override
other, less specific selectors like class selectors.
1. ID Selector for Styling a Button
Use the ID selector to target buttons and apply unique styling, such as background colors and
padding. This is useful for creating buttons with distinctive designs across your website.
Example
<html>
<head>
<style>
#submitBtn {
background-color: green;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
#submitBtn:hover {
background-color: darkgreen;
}
</style>
</head>
<body>
<button id="submitBtn">Submit</button>
</body>
</html>
Web Programming I
2. Styling Section with a Specific ID
ID selectors can be used to style entire sections of a webpage, making it easy to create consistent
layouts. For example, you can apply a background color and padding to a specific section of
content.
Example
<html>
<head>
<style>
#about {
background-color: #f4f4f4;
padding: 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<section id="about">
<h2>About Us</h2>
<p>We are a leading company in the industry...</p>
</section>
</body>
</html>
3. Combining ID Selector with Pseudo-Classes
By combining the ID selector with pseudo-classes like :hover, you can create interactive
elements. For instance, changing the background color of a button when the user hovers over it.
Example
<html>
<head>
<style>
#submitBtn {
Web Programming I
background-color: green;
color: white;
padding: 10px 20px;
}
#submitBtn:hover {
background-color: darkgreen;
}
</style>
</head>
<body>
<button id="submitBtn">Submit Again</button>
</body>
</html>
4. Targeting Nested Elements with an ID Selector
ID selectors can also target nested elements within a specific container. This allows for precise
styling of child elements like text or links within a div or section.
Example
<html>
<head>
<style>
#footer {
background-color: #333;
color: white;
padding: 20px;
}
#footer span {
font-weight: bold;
}
</style>
Web Programming I
</head>
<body>
<div id="footer">
<p>Contact us: <span>info@example.com</span></p>
</div>
</body>
</html>
5. ID Selector for Navigation
When styling navigation bars, the ID selector provides a way to apply unique styles to the entire
navigation element. It helps define things like font size, background color, and alignment.
Example
<html>
<head>
<style>
#nav {
font-size: 18px;
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<nav id="nav">Navigation Menu</nav>
</body>
</html>
Web Programming I
6. ID Selector for Targeting Forms
You can use the ID selector to style forms and their elements individually, applying padding,
borders, and spacing. This is ideal for making forms visually appealing and easy to fill out.
Example
<html>
<head>
<style>
#contactForm {
background-color: #f9f9f9;
padding: 20px;
border-radius: 5px;
}
#contactForm input {
margin-bottom: 10px;
padding: 8px;
width: 100%;
}
</style>
</head>
<body>
<form id="contactForm">
<input type="text" name="name" placeholder="Your Name">
<input type="email" name="email" placeholder="Your Email">
<button type="submit">Submit</button>
</form>
</body>
</html>
Web Programming I
7. ID Selector for Elements with Specific Layout
The ID selector is perfect for styling elements that have unique layout requirements, such as
footers. You can adjust margins, padding, and background colors to match the design of the
page.
Example
<html>
<head>
<style>
#footer {
margin-top: 30px;
padding: 20px;
background-color: #222;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div id="footer">Footer Content</div>
</body>
</html>
8. Combining Multiple IDs with Other Selectors
You can combine an ID selector with other selectors like element or class selectors to target
specific child elements. This provides more control over nested structures, such as styling only
h1 tags inside a section with a specific ID.
Example
<html>
<head>
<style>
#header h1 {
Web Programming I
color: red;
font-size: 24px;
}
</style>
</head>
<body>
<section id="header">
<h1>Welcome to My Website</h1>
</section>
</body>
</html>
9. Using ID Selector for Unique Content
When you need to apply unique styles to specific pieces of content, use the ID selector to ensure
that particular elements stand out. This is great for creating distinctive sections like call-to-action
boxes.
Example
<html>
<head>
<style>
#uniqueBox {
background-color: lightblue;
padding: 15px;
border: 1px solid #ccc;
text-align: center;
}
</style>
</head>
<body>
<div id="uniqueBox">This is a unique content box.</div>
Web Programming I
</body>
</html>
10. Overriding Other Selectors Using ID Selector
Due to its high specificity, the ID selector can override other selectors like class-based styles.
This is useful when you want to ensure a particular element’s style takes precedence.
Example
<html>
<head>
<style>
.box {
background-color: lightgray;
padding: 15px;
text-align: center;
}
#specialBox {
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">This is a general box.</div>
<div id="specialBox" class="box">This is a special box with unique styling.</div>
</body>
</html>
11. ID Selector for Animations or Transitions
The ID selector can be combined with CSS transitions or animations to add dynamic effects to
elements. This allows you to smoothly animate properties like size or position when the element
is hovered or clicked.
Example
<html>
Web Programming I
<head>
<style>
#box {
background-color: lightcoral;
width: 100px;
height: 100px;
transition: transform 0.3s;
margin: 20px;
}
#box:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
12. Overriding element selector by id selector
The ID selector has a higher specificity than element selectors, meaning it will override any
styles applied to elements of the same type. This allows you to apply unique styles to specific
elements without affecting others.
Example
<html>
<head>
<style>
p{
color: green;
font-size: 16px;
Web Programming I
}
#specialText {
color: red;
/* Overrides the paragraph color */
font-size: 20px;
}
</style>
</head>
<body>
<p>This is a regular paragraph.</p>
<p id="specialText">This paragraph has overridden styles using an ID selector.</p>
</body>
</html>
CSS Class Selector
CSS class selectors are one of the most versatile tools in your front-end development toolkit.
They allow you to apply styles to multiple elements on a webpage, ensuring your design remains
consistent and easily maintainable.
Syntax
.class-name{
property: value;
}
1. Basic class selector
The basic class selector applies styles to all elements with a specified class name. Use a period
(.) before the class name in the CSS.
Example
<html>
<head>
<style>
.highlight {
background-color: yellow;
Web Programming I
font-weight: bold;
}
</style>
</head>
<body>
<p class="highlight">This text is highlighted.</p>
<p>This text is not highlighted.</p>
</body>
</html>
2. Multiple Class Selectors
Multiple class selectors apply styles only to elements that have all the specified classes. Separate
the class names with a dot.
Example
<html>
<head>
<style>
.box.round {
border-radius: 10px;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="box round">This is a rounded box.</div>
<div class="box">This box is not rounded.</div>
</body>
</html>
Web Programming I
3. Chaining Class Selectors with Other Selectors
You can combine class selectors with element or pseudo-class selectors for more specific
targeting.
Example
<html>
<head>
<style>
p.important {
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<p class="important">This is an important paragraph.</p>
<p>This paragraph is not styled.</p>
</body>
</html>
4. Global Class Application
The universal selector with a class allows you to target all elements with the specified class.
Example
<html>
<head>
<style>
*.notice {
color: blue;
font-style: italic;
}
</style>
Web Programming I
</head>
<body>
<h1 class="notice">Notice this heading.</h1>
<p class="notice">This is a noticed paragraph.</p>
</body>
</html>
5. Combining Multiple Class Names
An element can have multiple class names, and each class’s styles will combine.
Example
<html>
<head>
<style>
.text-bold {
font-weight: bold;
}
.text-italic {
font-style: italic;
}
</style>
</head>
<body>
<p class="text-bold text-italic">This text is bold and italic.</p>
</body>
</html>
6. Targeting Nested Elements with Class Selectors
You can apply styles to elements within a parent class using descendant selectors.
Example
<html>
<head>
Web Programming I
<style>
.container p {
color: green;
}
</style>
</head>
<body>
<div class="container">
<p>This paragraph is inside a container.</p>
</div>
<p>This paragraph is outside the container.</p>
</body>
</html>
7. Overriding Class Styles
Use multiple classes on an element to override specific styles defined in earlier classes.
Example
<html>
<head>
<style>
.button {
padding: 10px;
background-color: gray;
}
.primary {
background-color: blue;
color: white;
}
</style>
</head>
Web Programming I
<body>
<button class="button primary">Primary Button</button>
</body>
</html>
8. Using Class Selectors with Media Queries
Class selectors can be used within media queries to make styles responsive.
Example
<html>
<head>
<style>
.responsive {
font-size: 16px;
}
@media (max-width: 600px) {
.responsive {
font-size: 12px;
}
}
</style>
</head>
<body>
<p class="responsive">Resize the browser window to see the text size change.</p>
</body>
</html>
CSS * (Universal) Selector
The universal selector (*) applies styles to all elements on a page or within a specified context,
regardless of their type, class, or ID. It’s commonly used for global resets or universal styling.
Web Programming I
Syntax
*{
/* styles */
}
1. Basic Use case of universal selector
The universal selector applies styles to all elements in the document, making it perfect for resets
or global rules. The margin: 0; and padding: 0; reset the default browser margins and paddings
for all elements.
Example
<html>
<head>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>This is a demonstration of the universal selector.</p>
</body>
</html>
2. Applying Default Styles to All Elements
You can use the universal selector to set consistent styles like box-sizing or font across all
elements .The box-sizing: border-box; makes element dimensions include padding and borders,
while font-family ensures consistent typography.
Example
<html>
<head>
Web Programming I
<style>
*{
box-sizing: border-box;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Welcome</h1>
<p>This is styled with a global font and box-sizing property.</p>
</body>
</html>
3. Highlighting Elements with Universal Selector
The universal selector is useful for debugging layouts by adding borders or outlines. The outline:
1px solid red; highlights the boundaries of every element.
Example
<html>
<head>
<style>
:root {
outline: none;
}
*{
outline: 1px solid red;
}
div {
display: flex;
gap: 30px;
justify-content: center;
Web Programming I
align-items: center;
}
</style>
</head>
<body>
<div>
<h1>Debug Mode</h1>
<p>All elements are outlined for debugging purposes.</p>
</div>
</body>
</html>
4. Targeting Elements with Attributes
Combine the universal selector with attribute selectors to style all elements with a specific
attribute .The *[title] targets all elements with a title attribute, adding a dashed blue border.
Example
<html>
<head>
<style>
*[title] {
border: 2px dashed blue;
}
</style>
</head>
<body>
<h1 title="Heading">Hello</h1>
<p>This paragraph has no title.</p>
<p title="Paragraph">This paragraph has a title.</p>
</body>
</html>
Web Programming I
5. Scoped Styling with Descendant Selector
The universal selector can style all children of a specific parent element .The .container * applies
styles to all elements inside the .container class.
Example
<html>
<head>
<style>
.container * {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h2>Inside Container</h2>
<p>All text here is green.</p>
</div>
<p>This text is not green.</p>
</body>
</html>
6. Excluding Specific Elements
Use the universal selector with the :not() pseudo-class to exclude elements .The *:not(h1) targets
all elements except h1, changing their text color to gray.
Example
<html>
<head>
<style>
*:not(h1) {
color: gray;
Web Programming I
}
</style>
</head>
<body>
<h1>Main Heading</h1>
<p>This paragraph is styled in gray.</p>
</body>
</html>
7. Responsive Styling with Universal Selector
Apply global changes using media queries and the universal selector. The universal selector
applies a smaller font size when the viewport is narrower than 600px.
Example
<html>
<head>
<style>
*{
font-size: 18px;
}
@media (max-width: 600px) {
*{
font-size: 14px;
}
}
</style>
</head>
<body>
<h1>Responsive Design</h1>
<p>Resize the browser to see the text size change.</p>
</body>
Web Programming I
</html>
CSS Pseudo-classes
A pseudo-class is a keyword added to a CSS selector, prefixed by a colon (:), to define a specific
state or condition of an element. It is used to style elements like a hovered button, the first child
of a container, or checked input fields.
Syntax
selector:pseudo-class {
/* styles */
}
Interactive/User Action Pseudo-Classes
1. :hover
This applies when the user hovers over an element.
Example
<html>
<head>
<style>
button:hover {
background-color: lightblue;
color: white;
}
</style>
</head>
<body>
<button>Hover over me!</button>
</body>
</html>
This will change the background color of the button when hovered over.
2. :focus
Applies when an element receives focus (e.g., a text input clicked)
Web Programming I
Example
<html>
<head>
<style>
input:focus {
border: 2px solid blue;
outline: none;
}
</style>
</head>
<body>
<input type="text" placeholder="Click to focus">
</body>
</html>
This will change the border of the input field to blue when it is focused.
3. :active
Applies when an element is being clicked
Example
<html>
<head>
<style>
button:active {
background-color: darkblue;
color: white;
}
</style>
</head>
<body>
<button>Click me!</button>
Web Programming I
</body>
</html>
This will change the background color of the button when it is being clicked (in the active state).
4. :visited
Applies to links the user has visited.
Example
<html>
<head>
<style>
a:visited {
color: purple;
}
</style>
</head>
<body>
<a href="https://www.example.com">Visit this link</a>
</body>
</html>
This will change the color of visited links to purple.
5. :link
Applies to links that the user has not visited yet.
Example
<html>
<head>
<style>
a:link {
color: green;
}
</style>
Web Programming I
</head>
<body>
<a href="https://www.example.com">Visit this link</a>
</body>
</html>
This will make unvisited links appear in green.
6. :focus-visible
Applies when an element is focused, but only if the focus is visible (e.g., for accessibility).This
Style is applied when user focus on an element using tab button.
Example
<html>
<head>
<style>
button:focus-visible {
outline: 3px solid orange;
}
</style>
</head>
<body>
<button>Click or Tab to focus</button>
</body>
</html>
7. :focus-within
Applies to an element if it or its descendants have focus.
Example
<html>
<head>
<style>
.form-container:focus-within {
Web Programming I
border: 2px solid green;
}
</style>
</head>
<body>
<div class="form-container">
<input type="text" placeholder="Type here">
</div>
</body>
</html>
This will apply a green border to the .form-container element when any of its descendants (like
the input field) has focus.
Structural targeting pseudo classes
1. :first-child
Matches the first child of its parent
Example
<html>
<head>
<style>
p:first-child {
color: red;
}
</style>
</head>
<body>
<div>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
</div>
Web Programming I
</body>
</html>
2. :last-child
Matches the last child of its parent
Example
<html>
<head>
<style>
p:last-child {
color: blue;
}
</style>
</head>
<body>
<div>
<p>This is the first paragraph.</p>
<p>This is the last paragraph.</p>
</div>
</body>
</html>
3. :nth-child(n)
Matches the nth child of its parent
Example
<html>
<head>
<style>
p:nth-child(5) {
color: green;
}
Web Programming I
</style>
</head>
<body>
<div>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
<p>This is the fourth paragraph.</p>
<p>This is the fifth paragraph.</p>
</div>
</body>
</html>
4. :nth-last-child(n)
Matches the nth child from the end of its parent
Example
<html>
<head>
<style>
p:nth-last-child(1) {
color: orange;
}
</style>
</head>
<body>
<div>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</div>
Web Programming I
</body>
</html>
5. :first-of-type
Matches the first instance of a specific type within a parent element.
Example
<html>
<head>
<style>
p:first-of-type {
color: purple;
}
</style>
</head>
<body>
<div>
<span>Some text</span>
<p>This is the first paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>
6. :empty
Matches elements with no children or content.
Example
<html>
<head>
<style>
div:empty {
background-color: green;
Web Programming I
}
#one {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="one"></div>
<div>
<p>This div has content.</p>
</div>
</body>
</html>
Form Pseudo-Classes
1. :checked
Matches checkboxes or radio buttons that are selected.
Example
<html>
<head>
<style>
input:checked {
outline: 5px solid red;
}
</style>
</head>
<body>
Agree to terms <input type="checkbox">
Web Programming I
</body>
</html>
2. :disabled
Matches elements that are disabled.
Example
<html>
<head>
<style>
input:disabled {
background-color: lightgray;
}
</style>
</head>
<body>
<input type="text" disabled placeholder="Disabled input">
</body>
</html>
3. :enabled
Matches elements that are enabled.
Example
<html>
<head>
<style>
input:enabled {
background-color: lightblue;
}
</style>
</head>
<body>
Web Programming I
<input type="text" placeholder="Enabled input">
</body>
</html>
4. :required
Matches form fields marked as required.
Example
<html>
<head>
<style>
input:required {
border: 2px solid red;
}
</style>
</head>
<body>
<form>
<input type="text" required placeholder="This field is required">
</form>
</body>
</html>
5. :optional
Matches form fields that are not required.
Example
<html>
<head>
<style>
input:optional {
border: 2px solid green;
}
Web Programming I
</style>
</head>
<body>
<form>
<input type="text" placeholder="This field is optional">
</form>
</body>
</html>
6. :valid
Matches form fields with valid input types entered in them.
Example
<html>
<head>
<style>
input:valid {
border: 2px solid green;
}
</style>
</head>
<body>
<form>
<input type="email" placeholder="Enter valid email" required>
</form>
</body>
</html>
7. :invalid
Matches form fields with invalid input entered in them.
Example
<html>
Web Programming I
<head>
<style>
input:invalid {
border: 2px solid red;
}
</style>
</head>
<body>
<form>
<input type="email" placeholder="Enter valid email" required>
</form>
</body>
</html>
8. :in-range
Matches inputs within a valid range (e.g., a number input).
Example
<html>
<head>
<style>
input:in-range {
background-color: lightgreen;
}
</style>
</head>
<body>
<form>
<input type="number" min="1" max="10" placeholder="Pick a number between 1 and 10">
</form>
</body>
Web Programming I
</html>
9. :out-of-range
Matches inputs outside the valid range.
Example
<html>
<head>
<style>
input:out-of-range {
background-color: lightcoral;
}
</style>
</head>
<body>
<form>
<input type="number" min="1" max="10" placeholder="Pick a number between 1 and 10">
</form>
</body>
</html>
10. :read-only
Matches elements that are read-only.
Example
<html>
<head>
<style>
input:read-only {
background-color: lightgray;
}
</style>
</head>
Web Programming I
<body>
<input type="text" value="This is read-only" readonly>
</body>
</html>
11. :read-write
Matches elements that are editable.
Example
<html>
<head>
<style>
input:read-write {
background-color: lightyellow;
}
</style>
</head>
<body>
<input type="text" placeholder="You can type here">
</body>
</html>
Other Pseudo-Classes
1. :scope
Helps to define a scope for an child to consider any element as it’s parent element.
Example
<html>
<head></head>
<body>
<div id="parent">
<p>This is the first paragraph inside #parent</p>
Web Programming I
<p>This is the second paragraph inside #parent</p>
<div>
<p>This paragraph is inside a nested div</p>
</div>
</div>
<script>
const parent = document.querySelector('#parent'); // Select the parent element
const child = parent.querySelectorAll(':scope > p'); // Only selects direct children of #parent
console.log(child);
</script>
</body>
</html>
2. :root
The :root pseudo-class matches the root element of the document, typically <html>
Example
<html>
<head>
<style>
:root {
--main-color: blue;
}
body {
color: var(--main-color);
}
</style>
</head>
<body>
<p>This text is styled using a CSS variable from the :root selector.</p>
</body>
Web Programming I
</html>
3. :target
The :target pseudo-class matches an element targeted by a URL fragment.
Example
<html>
<head>
<style>
#section1:target {
background-color: yellow;
}
</style>
</head>
<body>
<a href="#section1">Go to Section 1</a>
<p id="section1">This is Section 1. Clicking the link highlights this.</p>
</body>
</html>
4. :lang(language)
The :lang() pseudo-class matches elements with a specific language attribute.
Example
<html>
<head>
<style>
p:lang(en) {
color: green;
}
p:lang(fr) {
color: blue;
}
Web Programming I
</style>
</head>
<body>
<p lang="en">Hello</p>
<p lang="fr">Bonjour</p>
</body>
</html>
5. :dir(direction)
The :dir() pseudo-class matches elements based on their text direction (ltr or rtl).
Example
<html>
<head>
<style>
div:dir(ltr) {
text-align: left;
}
div:dir(rtl) {
text-align: right;
}
</style>
</head>
<body>
<div dir="ltr">This text is left-aligned.</div>
<div dir="rtl">Hello how are you</div>
</body>
</html>
6. :is(selector)
The :is() pseudo-class matches any element from a list of selectors, taking the highest specificity.
Example
Web Programming I
<html>
<head>
<style>
:is(h1, h2, h3) {
color: blue;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
</body>
</html>
7. :where(selector)
The :where() pseudo-class matches like :is() but has no specificity impact.
Example
<html>
<head>
<!--Driver Code Ends }-->
<style>
:where(header, footer) {
margin: 0;
padding: 10px;
background-color: lightgray;
}
</style>
</head>
<body>
Web Programming I
<header>Site Header</header>
<footer>Site Footer</footer>
</body>
</html>
You might also like
- A Companion To The Mckinsey PSG: Step-By Step Strategy Guide and Simulation Manual80% (5)A Companion To The Mckinsey PSG: Step-By Step Strategy Guide and Simulation Manual50 pages
- Chapter 2 Cascade Style Sheet CSS AAU Sem II 2014No ratings yetChapter 2 Cascade Style Sheet CSS AAU Sem II 2014168 pages
- Cascading Style Sheets (CSS) : CSS Is Used To Control The Style of A Web Document in A Simple and Easy Way100% (1)Cascading Style Sheets (CSS) : CSS Is Used To Control The Style of A Web Document in A Simple and Easy Way59 pages
- Cascaded Style Sheet: Vighnesh P Subject Matter Expert Ethnotech AcademyNo ratings yetCascaded Style Sheet: Vighnesh P Subject Matter Expert Ethnotech Academy88 pages
- Introduction To HTML and CSS For Web DevelopmentNo ratings yetIntroduction To HTML and CSS For Web Development5 pages
- E-Note_28179_Content_Document_20241127094830AMNo ratings yetE-Note_28179_Content_Document_20241127094830AM95 pages
- Global Attributes: The Attributes of An Element Which Is Common To The All HTML Elements. Some of The Global Attributes AreNo ratings yetGlobal Attributes: The Attributes of An Element Which Is Common To The All HTML Elements. Some of The Global Attributes Are30 pages
- webdesign mode1 and mod 2 till box notesNo ratings yetwebdesign mode1 and mod 2 till box notes7 pages
- Introduction To HTML - GHCC HackToLearnNo ratings yetIntroduction To HTML - GHCC HackToLearn22 pages
- 1.1 Sample Question - AMCAT ENGLISH COMPREHENSION PDF100% (1)1.1 Sample Question - AMCAT ENGLISH COMPREHENSION PDF5 pages
- Promoting A Positive Health and Safety Culture100% (1)Promoting A Positive Health and Safety Culture31 pages
- Dzone Refcard 292 Advanced Kubernetes 2020 PDFNo ratings yetDzone Refcard 292 Advanced Kubernetes 2020 PDF9 pages
- EDD.1.F.015 - General Application For AmendmentCancellationNo ratings yetEDD.1.F.015 - General Application For AmendmentCancellation3 pages
- Vastu Tips - 25 Ways To Boost Positive Energy in Your HomeNo ratings yetVastu Tips - 25 Ways To Boost Positive Energy in Your Home10 pages
- 03 - ICSE9th - Physics BookLet 27 May 21No ratings yet03 - ICSE9th - Physics BookLet 27 May 2199 pages
- Benguet Consolidated Mining Co. vs. Mariano Pineda, Consolidated Mines Inc.No ratings yetBenguet Consolidated Mining Co. vs. Mariano Pineda, Consolidated Mines Inc.11 pages
- A Companion To The Mckinsey PSG: Step-By Step Strategy Guide and Simulation ManualA Companion To The Mckinsey PSG: Step-By Step Strategy Guide and Simulation Manual
- Cascading Style Sheets (CSS) : CSS Is Used To Control The Style of A Web Document in A Simple and Easy WayCascading Style Sheets (CSS) : CSS Is Used To Control The Style of A Web Document in A Simple and Easy Way
- Cascaded Style Sheet: Vighnesh P Subject Matter Expert Ethnotech AcademyCascaded Style Sheet: Vighnesh P Subject Matter Expert Ethnotech Academy
- Global Attributes: The Attributes of An Element Which Is Common To The All HTML Elements. Some of The Global Attributes AreGlobal Attributes: The Attributes of An Element Which Is Common To The All HTML Elements. Some of The Global Attributes Are
- 1.1 Sample Question - AMCAT ENGLISH COMPREHENSION PDF1.1 Sample Question - AMCAT ENGLISH COMPREHENSION PDF
- EDD.1.F.015 - General Application For AmendmentCancellationEDD.1.F.015 - General Application For AmendmentCancellation
- Vastu Tips - 25 Ways To Boost Positive Energy in Your HomeVastu Tips - 25 Ways To Boost Positive Energy in Your Home
- Benguet Consolidated Mining Co. vs. Mariano Pineda, Consolidated Mines Inc.Benguet Consolidated Mining Co. vs. Mariano Pineda, Consolidated Mines Inc.