KHURASAN
UNIVERSITY
Selectors
[Link]- info@[Link]
Basic Selectors
CSS selectors are used to select the HTML elements that are to be styled by CSS.
Types of Selector Example:
1) Element selector
2) Id selector h1 {
3) Class selector color: red;
4) Universal selector }
5) Group selector
6) Attribute selector
Basic Selectors
1) Element Selector
The element selector selects HTML elements (p, div, h1, etc) and applies CSS to them.
h1 { p{ div {
color: red; color: orange; color: orange;
} } }
Note: The element selector is also referred to as a tag selector because it selects HTML
elements based on their tag names.
Basic Selectors
2) ID Selector
The id selector selects the HTML element with a unique identifier (id) and adds CSS to it.
The id selector is specified using the hash (#) character, followed by the id of the element.
#last_p { #head { #div {
color: red; color: orange; color: orange;
} } }
Note: The id selector is unique and selects one unique element.
Basic Selectors
3) Class Selector
The class selector selects the HTML element using the class attribute and applies CSS to it.
The class selector is specified using the period (.) character, followed by the class name.
.p { .head { .div {
color: red; color: orange; color: orange;
} } }
Basic Selectors
4) Universal Selector (all element on the page)
The universal selector selects every single HTML element on the page. It is written using the
asterisk ( * ) character.
*{
color: red;
}
Basic Selectors
5) Group Selector
The group selector allows you to select multiple elements and apply the same style to all of
them.
p, div, h1 {
color: red;
}
Basic Selectors
6) Attribute Selector
The attribute selector selects elements based on specific attribute values.
p[class]{ /*select p element which has class attribute */
color: red;
}
p[class=“third”]{ /*select p element which has class attribute with value of third */
color: red;
}
Note: This selector only selects an element if a specified given attribute exists.
Combinators Selectors
Combinators are symbols or characters that specify the relationship between different
HTML elements that you want to style.
Combinators help you target elements based on their position and hierarchy within the
HTML document.
There are four main types of CSS combinators:
• Descendant Combinator (space)
• Child Combinator (>)
• Adjacent sibling Combinator (+)
• General sibling Combinator (~)
Combinators Selectors
Combinators are symbols or characters that specify the relationship between different
HTML elements that you want to style.
Combinators help you target elements based on their position and hierarchy within the
HTML document.
There are four main types of CSS combinators:
• Descendant Combinator (space)
• Child Combinator (>)
• Adjacent sibling Combinator (+)
• General sibling Combinator (~)
Combinators Selectors
Descendant selector (space)
represented by a single space (" "), selects elements that are descendants of specified
element.
<div> /* parent element */
<p>Paragraph 1</p> /* child elements */
<p>Paragraph 2</p>
</div>
div p {
/* target p element inside div*/
}
Combinators Selectors
Direct Child Selector (>)
represented by the greater-than symbol (>), selects all elements that are immediate
children of a specified element.
/* this is because the child automatically copy the parent color */ <ul id="list">
<h1>Fruits</h1>
ul li{ <li>Mango</li>
color: darkblue; <li>Apple</li>
<li> Apple Types
} <ul>
/* will target direct children of the list */ <li>Green</li>
#list > li{ <li>Yellow</li>
<li>Red</li>
color:brown; </ul>
} </li>
<li>Melon</li>
</ul>
Combinators Selectors
Adjacent sibling selector (+)
represented by the plus sign (+), selects an element that is immediately preceded by a
specified element.
<h1>Heading 1</h1>
<p>Paragraph 1</p>
<h2>Heading 2</h2>
<p>Paragraph 2</p>
h2 + p {
/* target paragraph 2 b/c it is adjacent sibling of the h2 element*/
color:blue;
}
Combinators Selectors
General sibling selector (~)
represented by the tilde symbol (~), selects all elements that are siblings of a specified
element. (target elements of the same level)
<h1>Heading 1</h1>
<p>Paragraph 1</p>
<h2>Heading 2</h2>
<p>Paragraph 2</p>
h2 ~ p {
/* targets all paragraph that are siblings of the h2 element*/
color:blue;
}
CSS Pseudo-Classes Selectors
CSS pseudo-classes selectors select the HTML elements based on their state or position.
Syntax:
element:pseudo-class { /* CSS styles
*/ }
e.g. hover pseudo-class changes the styles of button while placing the mouse over it.
button:hover {
background-color: red;
color:black;
}
CSS Pseudo-Classes Selectors
Types of Pseudo-Class Selectors:
Structural pseudo-class: Selects elements based on their position in document such
as :first-child, :last-child, etc.
Link pseudo-class: Selects the links based on their state such as :link, :visited, etc.
UI pseudo-class: Selects the form elements based on their state such
as :enabled, :disabled, etc.
Structural Pseudo-Classes
1. CSS first-child Pseudo-Class
The :first-child selector targets an element if it is the first child of its parent, regardless of type.
<div> /* this will not target any element b/c p is not the first element */
<h1>I am the first element </h1> p:first-child {
<p>This is the first paragraph.</p>
color: red;
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p> }
</div>
2. CSS last-child Pseudo-Class
The :first-child selector targets an element if it is the last child of its parent, regardless of type.
/* this will target the last element b/c the last element is p*/
<div>
<p>This is the first paragraph.</p> div p:last-child {
<p>This is the second paragraph.</p> color: red;
<p>This is the third paragraph.</p> }
Structural Pseudo-Classes
3. nth-child()
The :nth-child(n) selector matches every element that is the nth child of its parent.
n can be a number, a keyword (odd or even), or a formula (like an + b).
<ul>
li:nth-child(2){
color: red;
<h1>Fruits</h1> /* 2 x 0 + 1 = 1 target no element*/
}
<li>Mango</li>
<li>Banana</li> /* 2 x 1 + 1= 3 target this element*/ li:nth-child(2n+1){
<li>Apple</li> color: darkblue;
<li>Apricot</li> /* 2 x 2 + 1= 5 target this element*/ font-weight: bold;
<li>Peach</li> }
</ul>
Structural Pseudo-Classes
Example.2:
<ul> /* 3 x 0 - 1 = -1 target no element*/
<h1>Fruits</h1> li:nth-child(3n-1){
<li>Mango</li> > /* 3 x 1 – 1 = 2 target this element*/
color: darkblue;
font-weight: bold;
<li>Banana</li
}
<li>Apple</li>
<li>Apricot</li> /* 3 x 2 – 1 = 5 target this element*/
<li>Peach</li>
</ul>
Structural Pseudo-Classes
4. nth-last-child()
The :nth-last-child(n) selector matches every element that is the nth child of a specified type, of its parent,
counting from the last child.
n can be a number, a keyword (odd or even), or a formula (like an + b). li:nth-last-child(2){
<ul> color: red;
<h1>Fruits</h1> /* 3 x 2 = 6 target this element*/ }
<li>Mango</li>
li:nth-last-child(3n){
<li>Banana</li>
color: darkblue;
<li>Apple</li>
font-weight: bold;
<li>Apricot</li>
}
<li>Peach</li>
/* 3 x 0 = 0 target no element*/
</ul>
Structural Pseudo-Classes
5. CSS first-of-type Pseudo-Class
The first-of-type selector targets the first occurrence of a specified element type within its parent.
<div>
<h1>I am the first element but I am not p </h1> p:first-of-type {
<p>I am not the first position but in p, I am the first</p>
<p>This is the second paragraph.</p>
color: red;
<p>This is the third paragraph.</p> }
</div>
6. CSS last-of-type Pseudo-Class
The first-of-type selector targets the first occurrence of a specified element type within its parent.
<div> p:last-of-type {
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
color: red;
<p>I am not the last element but in p, I am the last</p> }
<h1>I am the last element </h1>
</div>
Structural Pseudo-Classes
7. CSS not Pseudo-Class
The not pseudo-class selector styles the elements that do not match the user defined selector.
<div>
<p>This is the first paragraph.</p>
p:not(.special) {
<p class=“special”>This is the second paragraph.</p>
color: red;
<p>This is the third paragraph.</p> }
</div>
8. CSS empty Pseudo-Class
The empty pseudo-class selector styles every element that has no children.
<div> </div> /*will target this one with no element */ div:empty {
<div> width: 100px;
height: 20px;
<p>This is the first paragraph.</p>
background-color: red;
</div> }
Structural Pseudo-Classes
9. CSS lang() Pseudo-Class
The :lang() selector is used to select elements with a lang attribute with the specified value.
p:lang(ps){
<p lang="en">English Language</p> color: darkblue;
<p lang="ps">Pashto Language</p> }
<p lang="fr">French Lanuage</p> p:lang(en){
color: red;
}
Note: The lang attribute value is most often a two-letter language code, like lang=“ps"
(for Pashto), or two language codes combined, like lang="fr-ca" (for Canadian French).
Structural Pseudo-Classes
10. CSS :in-range and out-of-range Pseudo-Class
The :in-range selector selects all elements with a value that is within a specified range.
The :out-of-range selector selects all elements with a value that is outside a specified range.
Note: The :in-range and :out-of-range selectors only works for input elements with min and/or max attributes
<form>
<input type="number" min="10" max="60" step="any" value="0.00" name="txtage" id="txtage">
</form>
Step: any type of decimal number, if you want a number with only two decimal places, then write step=“0.01”.
input:in-range{ input:out-of-range{
background-color: greenyellow; background-color: red;
} }
Link Pseudo-Classes
11. focus pseudo-class selector
The focus pseudo-class selector styles the element that is focused by the user.
Search: <input type="text" name="search">
input[type="text"] {
width: 100px;
transition: width .35s ease-in-out;
}
input[type="text"]:focus {
width: 250px;
}
Link Pseudo-Classes
Link pseudo-classes select links based on their state.
1. link pseudo-class selector
The :link selector is used to select unvisited links. a:link {
text-decoration: none;
<a href="#">click here to view more info</a> color: blue;
font-weight: bold;
background-color: yellow;
}
Note: The :link selector does not style links you have already visited and cached on the browser..
if you visited that before, the style will not work.
Link Pseudo-Classes
2. visited pseudo-class selector
The visited pseudo-class selector styles the links that are visited by the user
<a href="#">click here to view more info</a>
/* styles the default state */
a:link {
text-decoration: none;
color: blue;
font-weight: bold;
background-color: greenyellow;
}
/* styles the visited state */
a:visited {
color: red;
}
Link Pseudo-Classes
4. hover pseudo-class selector
The hover pseudo-class selector styles the elements when the mouse is placed over it.
<a href="#">click here to view more info</a>
/* styles the focused state
*/
a:hover {
font-size: large;
font-weight: bolder;
}
Link Pseudo-Classes
5. active pseudo-class selector
The active pseudo-class selector styles the elements when the user clicks on it.
<a href="#">click here to view more info</a>
/* styles the focused state */
a:active {
font-size: large;
font-weight: bolder;
}
Note: The order of providing link pseudo-classes is important. The correct sequence is link,
visited, hover, and active to ensure that styles are applied correctly.
UI Pseudo-Classes
A UI pseudo-class selects elements based on their state or interaction with the user.
2. CSS enabled Pseudo-Class
The enabled pseudo-class selects and styles any enabled element.
An element is enabled if it can be selected, clicked on, typed into, etc., or accepts focus.
<body> <input type="text" placeholder="Username..." />
<button>Submit</button> </body>
input:enabled {
border: 2px solid blue;
}
UI Pseudo-Classes
CSS disabled Pseudo-Class
The disabled pseudo-class selects and styles elements that are disabled. It can form elements
like input fields or buttons that the user cannot interact with.
<body> <input type="text" placeholder="Username..." />
<button disabled>Submit</button> </body>
button:disabled {
cursor: not-allowed;
}
Note: To use the disabled pseudo class selector, we need to add the disabled keyword to the
HTML element.
Conclusion
Selectors are used to select an HTML element.
• Element selector (p, div, h1)
• Id selector (#head, #unique-element)
• Class selector (.headings, .rows)
• Universal selector (*)
• Group selector (p, h1, div{ } )
• Attribute selector (p[class], p[class=“jan”])
Pseudo-Class Selector select the HTML elements based on their state or position.
• Structural Pseudo-Class selectors (:first-child, :last-child, first-of-type, last-of-type)
• Links Pseudo-Class Selectors(:link, :visited, :hover, :focus, :active)
• UI Pseudo-Class Selectors (:enabled, :disabled)
ASSIGNMENTS
Group.1: CSS Pseudo-Element Selector
Group.2: !important property and priority levels in CSS.
Group.3 Units and fonts in CSS.
END
THANK
YOU !
KHURASAN
UNIVERSITY
[Link]- info@[Link]
