Scribd
Upload
8 views7 pages

Selector

The document outlines essential CSS selectors including Child Selector, Universal Selector, Adjacent Sibling Selector, Negation Selector, Attribute Selector, and Grouping Selector. Each selector is explained with examples demonstrating their usage for styling HTML elements. The document serves as a guide for understanding and applying these selectors effectively in CSS.

Uploaded by

ahmadtantawy.dev
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views7 pages

Selector

The document outlines essential CSS selectors including Child Selector, Universal Selector, Adjacent Sibling Selector, Negation Selector, Attribute Selector, and Grouping Selector. Each selector is explained with examples demonstrating their usage for styling HTML elements. The document serves as a guide for understanding and applying these selectors effectively in CSS.

Uploaded by

ahmadtantawy.dev
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

CSS Selectors You Should

Know

@_codevalley
Zuhaib Asif
@_codevalley Zuhaib Asif

Child Selector (parent > child):


It is used to select elements that are direct
children of a specified parent element. It
targets elements that are immediately nested
within another element and skips any elements
that are nested further down in the hierarchy.

ul > li {
list-style-type: square;
}

It selects direct child <li> elements of <ul> and


changes their list style type.
@_codevalley Zuhaib Asif

Universal Selector (*):


The Universal Selector selects all elements on
a web page. It doesn't discriminate by element
type, class, or ID. It's used to apply styles
globally or to reset default styles.

* {
margin: 0;
padding: 0;
}

It resets margin and padding for all elements on the


page.
@_codevalley Zuhaib Asif

Adjacent Sibling Selector


(element + element):
The Adjacent Sibling Selector selects an
element that is immediately preceded by
another element. It's useful for targeting
specific elements in a sequence.

h2 + p {
margin-top: 10px;
}

It adds a top margin to <p> elements directly


following an <h2>.
@_codevalley Zuhaib Asif

Negation Selector (:not(selector)):


The Negation Selector allows you to select
elements that do not match a specified
selector. It's helpful for excluding certain
elements from a style rule.

p:not(.special) {
font-style: italic;
}

It applies italic font style to all <p> elements except


those with class="special".
@_codevalley Zuhaib Asif

Attribute Selector ([attribute]):


Attribute Selectors allow you to target
elements based on their HTML attributes and
attribute values.

input[type="text"] {
border: 1px solid #ccc;
}

It styles <input> elements with type="text" with a


gray border.
@_codevalley Zuhaib Asif

Grouping Selector (selector1,


selector2):
The Grouping Selector lets you apply the same
styles to multiple selectors by separating them
with commas. It's a way to keep your CSS more
concise.

h1, h2, h3 {
color: #333;
}

It sets the text color for multiple heading elements


to dark gray.

You might also like