CSS selectors are patterns that allow you to select and style elements in an HTML document. Selectors are used to target specific HTML elements based on their element type, attributes, class, and ID.
Here are some commonly used CSS selectors:
Element Selector - selects all elements of a given type, such as "p" for paragraphs or "h1" for headings.
ID Selector - selects an element with a specific ID attribute. It is denoted by a "#" symbol, followed by the ID name.
Class Selector - selects all elements with a specific class attribute. It is denoted by a "." symbol, followed by the class name.
Attribute Selector - selects elements based on their attributes, such as "href" or "src". It is denoted by brackets, with the attribute name inside.
Descendant Selector - selects elements that are descendants of a specified parent element.
Child Selector - selects direct children of a specified parent element.
Universal Selector - selects all elements in a document.
CSS selectors are powerful tools that enable you to create specific styles for different elements in your HTML document. By mastering CSS selectors, you can create visually appealing and functional websites.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Example Page</title>
<style>
/* This is a CSS comment */
/* The following selector targets all paragraph elements and sets their font size to 16 pixels */
p {
font-size: 32px;
}
</style>
</head>
<body>
<h1>Welcome to my Example Page</h1>
<p>This is a paragraph with default font size.</p>
<p>This is another paragraph with default font size.</p>
<p>This is a third paragraph with default font size.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example Page</title>
<style>
/* This is a CSS comment */
/* The following selector targets the element with the ID "my-element" and sets its background color to red */
#my-element {
background-color: red;
}
</style>
</head>
<body>
<h1>Welcome to my Example Page</h1>
<div id="my-element">
<p>This paragraph has a red background color because it's inside an element with the ID "my-element".</p>
</div>
<p>This paragraph has the default background color because it's not inside an element with the ID "my-element".</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example Page</title>
<style>
/* This is a CSS comment */
/* The following selector targets all paragraph elements inside the element with the ID "my-element" and sets their font size to 32 pixels */
#my-element p {
font-size: 32px; /* Set the font size of all paragraphs inside the element with the ID "my-element" to 32 pixels */
}
/* The following selector targets all elements with the class "my-class" that are inside the element with the ID "my-element" and sets their text color to red */
#my-element .my-class {
color: red; /* Set the text color of all elements with the class "my-class" that are inside the element with the ID "my-element" to red */
}
</style>
</head>
<body>
<h1>Welcome to my Example Page</h1>
<div id="my-element">
<p>This paragraph has a font size of 32 pixels because it's inside the element with the ID "my-element".</p>
<p class="my-class">This paragraph has red text because it's inside the element with the ID "my-element" and has the class "my-class".</p>
</div>
<p>This paragraph has the default font size and text color because it's not inside the element with the ID "my-element" or the class "my-class".</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Attribute Selector Examples</title>
<style>
/* This is a CSS comment */
/* Example 1: exists selector */
/* This selector targets all elements that have a "data-category" attribute */
[data-category] {
color: blue;
}
/* Example 2: value selector */
/* This selector targets all "a" elements with a "href" attribute whose value starts with "https" */
a[href^="https"] {
color: green;
}
/* Example 3: substring value selector */
/* This selector targets all "img" elements with an "alt" attribute that contains the word "logo" */
img[alt*="logo"] {
border: 1px solid black;
}
/* Example 4: ends with value selector */
/* This selector targets all "a" elements with a "href" attribute whose value ends with ".pdf" */
a[href$=".pdf"] {
font-weight: bold;
}
/* Example 5: value with hyphen selector */
/* This selector targets all "a" elements with a "hreflang" attribute whose value starts with "en" and is followed by a hyphen */
a[hreflang|="en"] {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Attribute Selector Examples</h1>
<!-- Example 1: exists selector -->
<div data-category="sports">This is an element with a "data-category" attribute.</div>
<!-- Example 2: value selector -->
<a href="https://www.google.com">This is a link to Google</a>
<!-- Example 3: substring value selector -->
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6icTm2Sbcw_EbkZXXWk1buqlGaefJi_A3WGPDXpZCV-cdTvYfFGrPDcQsflxCVzZPW9OB3CnoTLkWzCgccqL7FTDPJ945BODXaGxG46ZENuUZYS9dPv8JOsf24arzOEDhCnEBjXfHorQ/s1600/Varanasi+Software+Junction+Phone+Logo.png" alt="Varanasi Software Junction Phone Logo">
<!-- Example 4: ends with value selector -->
<a href="document.pdf">Download PDF</a>
<!-- Example 5: value with hyphen selector -->
<a hreflang="en-us">English (US)</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Descendant Selector Example</title>
<style>
/* Style for top-level div element */
div {
background-color: #f2f2f2;
padding: 10px;
}
/* Style for nested div element */
div div {
background-color: #d9d9d9;
padding: 10px;
}
/* Style for double-nested div element */
div div div {
background-color: #bfbfbf;
padding: 10px;
}
</style>
</head>
<body>
<h1>Descendant Selector Example</h1>
<!-- Top-level div element -->
<div>
<p>This is the top-level div element.</p>
<!-- Nested div element -->
<div>
<p>This is a nested div element.</p>
<!-- Double-nested div element -->
<div>
<p>This is a double-nested div element.</p>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>nth-child Selector with Powers of 3</title>
<style>
/* Style for every third item, starting from the first item */
li:nth-child(3n+1) {
background-color: #f2f2f2;
}
/* Style for every third item, starting from the second item */
li:nth-child(3n+2) {
background-color: #d9d9d9;
}
/* Style for every third item, starting from the third item */
li:nth-child(3n) {
background-color: #bfbfbf;
}
</style>
</head>
<body>
<h1>nth-child Selector with Powers of 3</h1>
<!-- Unordered list -->
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
<li>Fifth item</li>
<li>Sixth item</li>
<li>Seventh item</li>
<li>Eighth item</li>
<li>Ninth item</li>
<li>Tenth item</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Complex Selector Example</title>
<style>
/* Style for all h2 elements */
h2 {
color: blue;
}
/* Style for all links inside paragraphs */
p a {
text-decoration: none;
color: red;
}
/* Style for all images with the "profile" class */
img.profile {
border-radius: 50%;
box-shadow: 0px 0px 10px gray;
}
/* Style for the first item in the unordered list */
ul li:first-child {
color: green;
}
/* Style for the last item in the unordered list */
ul li:last-child {
color: purple;
}
/* Style for even-numbered list items */
li:nth-child(even) {
background-color: #f2f2f2;
}
/* Style for odd-numbered list items */
li:nth-child(odd) {
background-color: #d9d9d9;
}
/* Style for all elements with the "important" attribute set to "true" */
[important=true] {
font-weight: bold;
color: orange;
}
</style>
</head>
<body>
<h1>Complex Selector Example</h1>
<!-- Heading -->
<h2>Welcome to my website!</h2>
<!-- Paragraph -->
<p>This is a paragraph with a <a href="#">link</a> in it.</p>
<!-- Image -->
<img class="profile" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6icTm2Sbcw_EbkZXXWk1buqlGaefJi_A3WGPDXpZCV-cdTvYfFGrPDcQsflxCVzZPW9OB3CnoTLkWzCgccqL7FTDPJ945BODXaGxG46ZENuUZYS9dPv8JOsf24arzOEDhCnEBjXfHorQ/s1600/Varanasi+Software+Junction+Phone+Logo.png" alt="Varanasi Software Junction Logo">
<!-- Unordered list -->
<ul>
<li>This is the first item.</li>
<li>This is the second item.</li>
<li>This is the third item.</li>
<li>This is the fourth item.</li>
<li>This is the fifth item.</li>
<li important="true">This is an important item.</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Image Hover Example</title>
<style>
/* Style for the image */
img.profile {
border-radius: 50%;
box-shadow: 0px 0px 10px gray;
transition: transform 0.3s ease-in-out;
}
/* Style for the image on hover */
img.profile:hover {
transform: rotate(360deg);
box-shadow: 0px 0px 20px gray;
}
</style>
</head>
<body>
<h1>Image Hover Example</h1>
<!-- Image -->
<img class="profile" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6icTm2Sbcw_EbkZXXWk1buqlGaefJi_A3WGPDXpZCV-cdTvYfFGrPDcQsflxCVzZPW9OB3CnoTLkWzCgccqL7FTDPJ945BODXaGxG46ZENuUZYS9dPv8JOsf24arzOEDhCnEBjXfHorQ/s1600/Varanasi+Software+Junction+Phone+Logo.png" alt="Varanasi Software Junction Logo">
</body>
</html>
Contact us for software training, education or development
.png)
0 Comments