Selectors
How styles are to be applied to elements on the page.
Common Selectors :
<style>
#intro{
padding:24px;
background-color: rgb(37, 105, 164);
color:white;
}
h1 {
color :rgb(190, 190, 213);
}
.heading{
color :rgb(15, 15, 136);
}
.tagline {
background-color: brown;
}
article h2{
background-color: blueviolet;
}
article > p{
background-color: coral;
color:wheat;
}
</style>
<section id="intro">
Its a ID Selector
<h1>Heading 1 Type Selector</h1>
<h2 class="tagline">Class Selector</h2>
</section>
<h1 class="heading">1. CHILD SELECTORS</h1>
<h1 class="heading">A. DESCENDENT SELECTORS</h1>
<h2>Heading not selected</h2>
<article>
<h2>This heading will be selected</h2>
<div>
<h2>This heading will be selected</h2>
<div>
<h2>This heading will be selected</h2>
</div>
</div>
</article>
<h1 class="heading">B. DIRECT CHILD</h1>
<p>Paragraph not selected</p>
<article>
<p>Paragraph selected</p>
<div>
<p>Paragraph not selected</p>
<div>
<p>Paragraph not selected</p>
</div>
</div>
<p>Paragraph selected</p>
</article>
These selectors include the type, class, and ID selectors.
The type selector identifies an element based on its type
The class selector identifies an element based on its class attribute value, which may be reused on multiple elements as necessary to help share popular styles.
the ID selector identifies an element based on its ID attribute value, which is unique and should only be used once per page.
Child Selectors :
There shall be a parent element inside there may be child elements. selections can be made two different ways, using either descendant or direct child selectors.
A. Descendant Selectors
Parent -> Child may be immediate or any level of grant child. Selects an element that resides anywhere within an identified parent element
B. Direct Child Selects an element that resides immediately inside an identified parent element
Sibling Selectors :
Elements share the common parent
A. General Sibling Selector
<style>
h2 ~ p {
background-color: brown;
color:white;
}
h1 + div {
background-color: blueviolet;
color:white;
}
</style>
<p>Not Selected</p>
<section>
<p>Not Selected</p>
<h2>Heading 1</h2>
<p>This paragraph will be selected</p>
<div>
<p>Not Selected</p>
</div>
<p>This paragraph will be selected</p>
<h3>Heading 3</h3>
<p>This paragraph will be selected</p>
</section>
<section>
<h1>Heading 1</h1>
<div>
Hello Div 1
<p>Hello Div 1 Para 1
<div>
Division 1_2
</div>
</p>
</div>
<h2>Heading 2</h2>
<div>
div 2
</div>
<h1>Heading 1</h1>
<div>
Div 2
</div>
<div>
Div 2_2
</div>
</section>
The Selector_1 ~ Selector_2 selector is a general sibling selector that looks for Selector_2 elements that follow, and share the same parent, of any Selector_1 elements.
Eg :The h2 ~ p selector is a general sibling selector that looks for p elements that follow, and share the same parent, of any h2 elements.
B. Adjacent Sibling
Refer above snippet
Looking at the adjacent sibling selector h2 + p only p elements directly following after h2 elements will be selected. Both of which must also share the same parent element. h2 + p
Looking at the adjacent sibling selector h2 + p only p elements directly following after h2 elements will be selected. Both of which must also share the same parent element.
Attribute Selectors
Elements can be selected based on whether an attribute is present and what its value may contain.
ID ,class selectors
A. Attribute Present Selector
attribute present or not
For Eg : a[target] {...} if a tag includes target attribute
B. Attribute Equals Selector
To identify an element with a specific, and exact matching, attribute value
a[href="google.com"] {...}
C. Attribute Contains Selector
Find an element based on part of an attribute value
a[href*="login"] {...}
D. Attribute Begins With Selector
a[href^="https://"] {...}
E. Attribute Ends With Selector
a[href$=".pdf"] {...}
F.Attribute Spaced Selector
The tilde character, ~, within the square brackets of a selector between the attribute name and equals sign denotes an attribute value that should be whitespace-separated, with one word matching the exact stated value. a[rel~="tag"] {...} ...
G.Attribute Hyphenated Selector
a[lang|="en"] {...}
Pseudo Classes
result of users’ actions or the document structure
<style>
a:hover {
text-decoration: none;
}
a:link {
color: rgb(187, 14, 14);
}
a:visited {
color:rgb(42, 155, 165);
}
a:focus {
font-weight: bold;
}
a:active {
letter-spacing: 2em;
</style>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
A. Link Psuedo-Classes a:link,a:visited
B. User Action Pseudo-classes :hover, :active,:focus
C. User Interface State Pseudo-classes :enabled, :disabled, :checked, and :indeterminate(When a checkbox or radio button has neither been selected nor unselected it lives in an indeterminate state). (Checkbox and radio buttons)
D. Structural & Position Pseudo-classes
<style>
ul {
color :rgb(177, 172, 172);
}
li:first-child {background-color: blue;}
li:last-child {background-color: rgb(254, 1, 39);}
div:only-child {background-color: rgb(255, 0, 208);}
ul div{
background-color: rgb(69, 29, 29);
}
article p:first-of-type{
font-weight: bold;
}
article p:last-of-type {
color: brown;
}
article p:only-of-type {
color:blueviolet;
}
</style>
<article>
<p>paragraph First of Type</p>
<div>
<p>Para div 1</p>
<span>Span 1</span>
<p>Para div 2</p>
</div>
<p>para inside main parent</p>
<div>
<p>Only para</p>
</div>
</article>
Elements are determined based off where elements reside in the document tree
:first-child pseudo-class will select an element if it’s the first child within its parent. Eg: li:first-child identifies the first list item within a list
:last-child pseudo-class will select an element if it’s the last element within its parent.
:only-child will select an element if it is the only element within a parent.
to select the first, last, or only child of a specific type of element. For example, should you only want to select the first or last paragraph within an article, or perhaps the only image within an article. :first-of-type, :last-of-type, and :only-of-type pseudo-selectors come into place.
select elements based on a number or an algebraic expression. nth-child(n), :nth-last-child(n), :nth-of-type(n), and :nth-last-of-type(n).
Expressions in the argument (an,an+b,an-b etc)
:target - selects the sections/elements based on the # in the URI
<style>
section:target {
color:red;
}
div:empty {background-color: aqua;border: 2px solid black; width:20%; height:20%;}
p:not(.intro) {
background-color: bisque;
}
</style>
<a href="#hello">Click Hello</a>
<a href="#hi">Click hI</a>
<section id="hello">
<p>Para 1</p>
</section>
<section id="hi">
<p>Para 2</p>
</section>
<div>Hello</div>
<div><!-- Coming soon --></div><!-- This div will be selected -->
<div></div><!-- This div will be selected -->
<div> </div>
<div><strong></strong></div>
<div>
<p class="intro">Paragraph1</p>
<p>Paragraph2</p>
<p>Paragraph3</p>
<p>Paragraph4</p>
<p>Paragraph5</p>
</div>
The :empty pseudo-class allows elements that do not contain children or text nodes to be selected. :not(x), is a pseudo-class that takes an argument which is filtered out from the selection to be made. The p:not(.intro) selector uses the negation pseudo-class to identify every paragraph element without the class of intro.
Pseudo-elements :
Textual Pseudo-elements
:first-letter
Selects the first letter of text within an element
:first-line
Selects the first line of text within an element
Generated Content
:before
Creates a pseudo-element inside the selected element at the beginning
:after
Creates a pseudo-element inside the selected element at the end