Simple Selectors
- Type Selector: Selects all elements of a given type (tag).
- Class Selector: Selects all elements with a given class.
- ID Selector: Selects a single element with a given ID.
- Universal Selector: Selects all elements.
- Attribute Selector: Selects elements with a specific attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Selectors</title>
<style>
/* Element selector */
p {
color: blue;
}
/* Class selector */
.class-selector {
font-weight: bold;
}
/* ID selector */
#id-selector {
background-color: yellow;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p class="class-selector">This is a bold paragraph.</p>
<p id="id-selector">This is a highlighted paragraph.</p>
</body>
</html>
Combinator Selectors
- Descendant Selector: Selects elements that are inside another element.
- Child Selector: Selects elements that are direct children of another element.
- Adjacent Sibling Selector: Selects an element that is immediately next to another element.
- General Sibling Selector: Selects all elements that are siblings of a specified element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Combinator Selectors</title>
<style>
/* Descendant selector */
div p {
color: green;
}
/* Child selector */
div>p {
color: red;
}
/* Adjacent sibling selector */
h1+p {
color: blue;
}
/* General sibling selector */
h1~p {
color: purple;
}
</style>
</head>
<body>
<div>
<p>Descendant selector example</p>
<p>Child selector example</p>
</div>
<h1>Heading</h1>
<p>Adjacent sibling selector example</p>
<p>General sibling selector example</p>
</body>
</html>
Pseudo-class & Pseudo-element Selectors
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pseudo-Class & Elements Selectors</title>
<style>
/* Pseudo-class selector */
a:hover {
color: red;
}
/* Pseudo-element selector */
p::first-line {
font-weight: bold;
}
</style>
</head>
<body>
<a href="#">Hover over me</a>
<p>This is an example of using pseudo-elements and pseudo-classes.</p>
</body>
</html>
Attribute Selectors
- [attribute]: Selects elements with a specific attribute.
- [attribute=value]: Selects elements with a specific attribute value.
- [attribute~=value]: Selects elements with an attribute containing a specified word.
- [attribute|=value]: Selects elements with an attribute value starting with a specified value.
- [attribute^=value]: Selects elements with an attribute value starting with a specified value.
- [attribute$=value]: Selects elements with an attribute value ending with a specified value.
- *[attribute=value]**: Selects elements with an attribute value containing a specified value.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attribute Selectors</title>
<style>
/* Attribute selector */
a[href] {
color: green;
}
/* Attribute value selector */
input[type="text"] {
border: 2px solid blue;
}
/* Attribute starts with selector */
a[href^="https"] {
color: orange;
}
/* Attribute ends with selector */
a[href$=".com"] {
color: red;
}
/* Attribute contains selector */
a[href*="example"] {
color: purple;
}
</style>
</head>
<body>
<a href="https://example.com">Example Link</a>
<input type="text" placeholder="Text input">
<input type="password" placeholder="Password input">
<a href="http://test.com">Another Link</a>
</body>
</html>
No comments:
Post a Comment