CSS- Additional Pseudo-Classes

Developer
Anthony Albertorio
Size
2,690 Kb
Views
14,168
  1. CSS- Additional Pseudo-Classes Previews
  2. CSS- Additional Pseudo-Classes HTML Codes
  3. CSS- Additional Pseudo-Classes CSS Codes

How do I make an css- additional pseudo-classes?

CSS Pseudo-Classes covered: :root :target :empty :not(). What is a css- additional pseudo-classes? How do you make a css- additional pseudo-classes? This script and codes were developed by Anthony Albertorio on 24 September 2022, Saturday.

CSS- Additional Pseudo-Classes Previews
IQ Test

CSS- Additional Pseudo-Classes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS- Additional Pseudo-Classes</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul> <li><a href="#s1">Target Section 1</a></li> <li><a href="#s2">Target Section 2</a></li> <li><a href="#s3">Target Section 3</a></li>
</ul>
<div id="s1"> <h2>Section 1</h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in.
</div>
<div id="s2"> <h2>Section 2</h2> Integer laoreet urna ut est cursus nec tristique elit vestibulum. In hac habitasse platea dictumst. Quisque pharetra odio nec urna lobortis sed ultrices dolor posuere. Sed nec nisl id augue congue euismod. Nullam elementum quam vitae lectus consequat eu faucibus odio iaculis. Nunc at turpis nibh, posuere faucibus ligula.
</div>
<div id="s3"> <h2>Section 3</h2> Sed ullamcorper posuere accumsan. Maecenas in varius libero. Morbi elementum nisi orci, adipiscing venenatis odio accumsan vel. Aliquam pretium velit sapien, non pulvinar nisi faucibus sit amet. Curabitur eu ligula vel est dictum euismod. Pellentesque suscipit commodo odio non eleifend.
</div>
<!--empty div element -->
<div></div>
</body>
</html>

CSS- Additional Pseudo-Classes - Script Codes CSS Codes

/* General Styling*/
body { font: normal 1.1em/1.5 sans-serif; padding: 0 22%;
}
ul { line-height: 2.1em; list-style-type: none; padding-left: 20px;
}
h2 { margin-top: 0;
}
div { margin-bottom: 12px; padding: 20px;
}
/*Pseudo-classes*/
/* :root pseudo-class selects element that is the root of the document.
In this case, its the  element
Why use :root? Because it has more specificity than HTML type selector.
*/
:root { background-color: #e0eef5;
}
/* :target pseudo class- Allows us to target elements based on the url; so if the elements id matches the hash in the url.
An example is the click back to top link that takes you the top of the same page.*/
/*Pretty handy when reading and looking to highlight sectiont that you are on*/
:target { color: limegreen; background-color: tomato;
}
/* :empty pseudo class- targets elements that have no child elements or content what so ever; target empty elements.
*/
/* A good use for this would be a results field (in say a form) that returns empty or with no content. We can use it to warn the user that no results were found or returned.
*/
:empty { background-color: tomato;
}
/* :not(){} -negation pseudo-class.
It selects everything except the element that we specifiy.
We can use it with just about any type of
In this case, targets all the div elements that are not empty*/
/*
div:not(:empty) { background-color: lightyellow;
}
*/
/*targest all divs except the with the attribute id=s2
pretty cool!*/
div:not([id="s2"]){ background-color: lightyellow;
}
CSS- Additional Pseudo-Classes - Script Codes
CSS- Additional Pseudo-Classes - Script Codes
Home Page Home
Developer Anthony Albertorio
Username tesla809
Uploaded September 24, 2022
Rating 3
Size 2,690 Kb
Views 14,168
Do you need developer help for CSS- Additional Pseudo-Classes?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anthony Albertorio (tesla809) Script Codes
Name
Tic Tac Toe
CSS- UI Element States Pseudo-Classes
FreeCodeCamp-Tribute Page
A Pen by Anthony Albertorio
Weather App
FreeCodeCamp-Tribute Page on Ethereum
CSS- Relative Length Units
Million-token-HomePage-initial-mockup
CSS Combinators
Famo.us test
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!