selectors.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selectors</title>
<link rel="stylesheet" href="selectors.css">
</head>
<body>
<ul>
<li id="select">The Great Barrier Reef</li>
<li class="underline">Pyramids of Giza</li>
<li class="underline">Stonehenge</li>
</ul>
</body>
</html>
selectors.css
li{
border: 4px solid blue;
}
#select{
background-color: red;
}
.underline{
text-decoration: underline;
}
Output
Basic Selectors
Universal Selector (
*):- Selects all elements.
- Example:
* { margin: 0; padding: 0; }
Type Selector (Element Selector):
- Selects all elements of a given type.
- Example:
p { font-size: 16px; }
Class Selector (
.):- Selects all elements with a specific class.
- Example:
.highlight { background-color: yellow; }
ID Selector (
#):- Selects a single element with a specific ID.
- Example:
#header { background-color: blue; }
Attribute Selectors
[attribute] Selector:
- Selects elements with a specific attribute.
- Example:
[type="text"] { width: 200px; }
[attribute=value] Selector:
- Selects elements with a specific attribute value.
- Example:
[href="example.com"] { color: red; }
[attribute~=value] Selector:
- Selects elements with an attribute containing a specific word.
- Example:
[class~=button] { padding: 10px; }
[attribute|=value] Selector:
- Selects elements with an attribute value that is exactly equal to a given value or starts with a given value followed by a hyphen.
- Example:
[lang|=en] { font-family: Arial; }
[attribute^=value] Selector:
- Selects elements with an attribute value that starts with a specific value.
- Example:
[title^="Hello"] { color: green; }
[attribute$=value] Selector:
- Selects elements with an attribute value that ends with a specific value.
- Example:
[src$=".jpg"] { border: 1px solid black; }
[attribute=value] Selector*:
- Selects elements with an attribute value that contains a specific value.
- Example:
[title*="important"] { font-weight: bold; }
Combinator Selectors
Descendant Selector (space):
- Selects all elements that are descendants of a specified element.
- Example:
div p { color: blue; }
Child Selector (
>):- Selects all elements that are direct children of a specified element.
- Example:
ul > li { list-style-type: none; }
Adjacent Sibling Selector (
+):- Selects an element that is the next sibling immediately following another element.
- Example:
h1 + p { margin-top: 0; }
General Sibling Selector (
~):- Selects all elements that are siblings of a specified element.
- Example:
h2 ~ p { color: gray; }
Pseudo-class Selectors
:hover:- Selects elements when the user hovers over them.
- Example:
a:hover { color: red; }
:focus:- Selects elements that have focus.
- Example:
input:focus { border-color: blue; }
:nth-child(n):- Selects the nth child of a parent.
- Example:
li:nth-child(2) { color: green; }
:nth-of-type(n):- Selects the nth child of a specific type of its parent.
- Example:
p:nth-of-type(2) { font-size: 18px; }
:first-child:- Selects the first child of a parent.
- Example:
p:first-child { font-weight: bold; }
:last-child:- Selects the last child of a parent.
- Example:
p:last-child { font-style: italic; }
:only-child:- Selects an element that is the only child of its parent.
- Example:
p:only-child { color: purple; }
:nth-last-child(n):- Selects the nth child from the end of its parent.
- Example:
li:nth-last-child(2) { color: orange; }
Pseudo-element Selectors
::before:- Inserts content before the content of an element.
- Example:
p::before { content: "Note: "; font-weight: bold; }
::after:- Inserts content after the content of an element.
- Example:
p::after { content: " End"; }
::first-line:- Selects the first line of a block-level element.
- Example:
p::first-line { font-size: 1.2em; }
::first-letter:- Selects the first letter of a block-level element.
- Example:
p::first-letter { font-size: 2em; color: red; }
Grouping Selectors
- Grouping Selector (
,):- Selects all elements matched by the selectors separated by a comma.
- Example:
h1, h2, h3 { margin-bottom: 10px; }
Other Useful Selectors
:not(selector):- Selects all elements that do not match the given selector.
- Example:
:not(p) { background-color: lightgray; }
:empty:- Selects elements that have no children.
- Example:
div:empty { display: none; }
:checked:- Selects checked elements (checkboxes or radio buttons).
- Example:
input:checked { background-color: yellow; }
:disabled:- Selects disabled form elements.
- Example:
input:disabled { background-color: lightgray; }
No comments:
Post a Comment