SELETORS
In CSS, a selector is a pattern used to select and style specific elements in an HTML
document. Selectors tell the browser which elements on the page should have certain styles
applied to them.
Selectors are essential in CSS for targeting and applying styles to HTML elements. They can
be simple, like selecting all paragraphs, or more complex, like targeting specific nested
elements or elements with particular classes or IDs. Understanding selectors helps you style
your web pages effectively and efficiently. Here are some common types of selectors and
how they work:
1. Wildcard (Universal) Selector.
2. Element Selector.
3. Class Selector.
4. ID Selector.
5. Attribute selector.
6. Specific Selector.
7. Group Selector.
CONTEXTUAL SELECTOR:
8. Descendant Selector.
9. Child Selector.
10. Adjacent Sibling Selector.
11. General sibling selector.
1. Wildcard (Universal) Selector.
The wildcard, or universal selector, targets all elements on a page. It is represented by an
asterisk (*). This selector is useful for applying a common style to every element, like
resetting margins or setting a default box-sizing. It's a broad selector that affects all
elements within the scope of your stylesheet or a specific part of the DOM if nested within
other selectors. Use it carefully to avoid unintended global styling impacts. The universal
selector helps in creating consistent base styles across the entire web page.
EXAMPLE:
<html>
<head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>Universal Selector Example</h1>
<p>This paragraph has no margin or padding.</p>
</body>
</html>
OUTPUT:
2.Element Selector
The element selector targets all instances of a specific HTML element. It's used to apply the
same style to every occurrence of that element on a page. You don't need any special
symbols for this selector; just use the element name. It's ideal for setting default styles for
common elements like headings, paragraphs, and lists. This selector applies broadly across
the entire page.
EXAMPLE:
<html>
<head>
<style>
p{
font-size: 16px;
color: black;
}
</style>
</head>
<body>
<h1>Element Selector Example</h1>
<p>This paragraph uses the element selector for font size and color.</p>
</body>
</html>
OUTPUT:
3.Class Selector
The class selector targets elements with a specific class attribute. Classes can be used on
multiple elements. To use a class selector in CSS, precede the class name with a dot (.). This
selector is useful for applying styles to groups of elements that share common
characteristics. Classes are defined in your HTML with the class attribute. They help in
grouping elements for styling purposes.
EXAMPLE:
<html>
<head>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Class Selector Example</h1>
<p class="highlight">This paragraph is highlighted using a class selector.</p>
</body>
</html>
OUTPUT:
4.ID Selector
The ID selector targets a single, unique element with a specific ID attribute. IDs should be
unique within a page. To use an ID selector in CSS, precede the ID name with a hash symbol
(#). This selector is useful for applying styles to specific elements that need unique styling.
IDs are defined in your HTML with the id attribute. Use it for elements that require distinct
styles.
EXAMPLE:
<html>
<head>
<style>
#unique {
color: red;
}
</style>
</head>
<body>
<h1>ID Selector Example</h1>
<p id="unique">This paragraph has a unique style using an ID selector.</p>
</body>
</html>
OUTPUT:
5.Attribute Selector.
An attribute selector provides a way to select HTML elements either by the presence of an
element attribute or by the value of an attribute. Attribute selectors can be a very helpful
technique in the styling of hyperlinks and form elements. Many of the different form
widgets, such as text boxes, radio buttons, and password fields, are all constructed from the
same <input> element. You use the type attribute to indicate which form widget you want.
You typically will want to style the different widgets in quite different ways; the attribute
selector provides a common way to achieve this goal.
EXAMPLE:
5. pseudo-element or pseudo-class selector
A pseudo-element selector is a way to select something that does not exist explicitly as an
element in the HTML document tree but which is still a recognizable selectable object. For
instance, you can select the first line or first letter of any HTML element using a pseudo-
element selector. A pseudo-class selector does apply to an HTML element but targets either
a particular state or a variety of family relationships.
5.Specific Selector
Specificity in CSS determines which styles are applied when multiple rules match the same
element. It is calculated based on the types of selectors used: IDs have the highest
specificity, followed by classes, and then elements. Understanding specificity helps in
troubleshooting CSS conflicts. To use selectors correctly, remember their respective
symbols. This ensures that styles are applied as intended.
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: green;
}
.important {
color: orange;
}
#specific {
color: purple;
}
</style>
</head>
<body>
<p>This is a green paragraph.</p>
<p class="important">This is an orange paragraph.</p>
<p id="specific">This is a purple paragraph.</p>
</body>
</html>
OUTPUT:
6. Group Selector
The group selector allows you to apply the same styles to multiple selectors by separating
them with a comma. This reduces redundancy and makes your CSS more concise. It is
efficient for applying common styles to different elements without repeating the CSS rule
for each element. Grouping selectors simplifies your stylesheet. Use this method to keep
your CSS organized and readable.
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, h3 {
color: navy;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>
</body>
</html>
OUTPUT:
CONTEXTUAL SELECTOR:
A contextual selector (in CSS3 also called combinators) allows you to select elements based
on their ancestors, descendants, or siblings. That is, it selects elements based on their
context or their relation to other elements in the document tree.While some of these
contextual selectors are used relatively infrequently, almost all web authors find themselves
using descendant selectors.
8. Descendant Selector
The descendant selector targets elements that are nested within another specified element.
This selector is used by separating two selectors with a space. It applies styles based on the
hierarchical relationship between elements. Descendant selectors help in styling elements
within a specific context. They are useful for applying styles to nested elements in your
HTML structure.
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<style>
div p {
color: brown;
}
</style>
</head>
<body>
<div>
<p>This paragraph is inside a div.</p>
</div>
<p>This paragraph is outside a div.</p>
</body>
</html>
OUTPUT:
9. Child Selector
The child selector targets direct children of a specified element. This selector ensures that
the style is applied only to the immediate children and not to nested descendants. Use the >
symbol between the parent and child selectors. Child selectors are useful for precise styling
within a parent-child relationship. They help in targeting specific elements more accurately.
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<style>
ul > li {
list-style-type: square;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ul>
</li>
</ul>
</body>
</html>
OUTPUT:
10.Adjacent Sibling Selector
The adjacent sibling selector targets an element that is immediately preceded by a specified
element. Use the + symbol between the selectors of the two elements. This selector is
helpful for styling elements that follow certain elements directly. It ensures that styles are
applied to elements immediately following the specified element. Adjacent sibling selectors
are useful for styling based on element order.
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<style>
h1 + p {
color: blue;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<p>This paragraph follows the heading and is blue.</p>
<p>This paragraph is not blue.</p>
</body>
</html>
OUTPUT:
11.General sibling
All following elements that shares the same parent as the specified element.
Code:
<html >
<head>
<title>General Sibling Selector Example</title>
<style>
</style>
.title ~ p {
color: blue;
font-weight: bold;
}
</head>
<body>
<h2 class="title">Heading 2</h2>
<p class="content">This is a paragraph following the heading.</p>
<p class="content">This is another paragraph following the heading.</p>
<div>This is a div element.</div>
<h2 class="title">Another Heading 2</h2>
<p>This paragraph is under the second heading.</p>
</body>
</html>
