CSS Selectors (lt.13)
Universal selectors (*): When we have to apply a design to the whole web page. It is also known as the wildcard selector. Matches all elements on a page.
ex: * {
color: red;
}
Element selector: It selects a specific type of HTML element. Select a specific type of HTML element.
ex: h1 {
color: black;
}
Class selector(.): Selects all elements with a specific class attribute. Class name can be same for more than one tag , we can use classes in nested order.
ex: .class1 {
color: green;
}
Id selector(#): Selects a single element with a specific id attribute. ID will be unique for every tag, we can use the same id for different tags but it will go against the definition so avoid using the same ID for more than one tag.
ex: #id1 {
color: purple;
}
Selector list(,): The CSS selector list allows us to select multiple elements with different selectors at once and style.
ex: .class1 , .class2 , .class3 {
background-color: aqua;
}
Descendent selector: This means the one who is under or the one who is a child element. ls also known as the whitespace selector, used to select all elements that are descendants of a specified element.
Child selector(>): Also called direct selector. It can only target the direct or immediate child of the parent selector.
For child selector to work the child should be directly after the parent if there will be any other tag between them then , then child selector will not work but the descendent selector will work.
All descendent selectors can't be child selectors, but all child selectors are descendent selectors.
Adjacent sibling selector(+): It will only select the element that is immediately after the mentioned element.
General sibling selector(~): They are used to select all elements that follow the first element such that all are children of the same parent.
Attribute selector[target =" " ]: The attribute selector in HTML and CSS is used to select elements based on their attributes. Attributes are used to provide additional information about an HTML element.
And selector: The and CSS selector is used to combine two or more selectors into a single selector. This can be useful for selecting elements that meet multiple criteria.
code to demonstrate :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="lt_25jan.css">
<title>Selectors</title>
</head>
<body>
<!-- UNIVERSAL selector -->
<!-- Element selector -->
<h1> how r u</h1>
<p> i m fine</p>
<h5 class="helo">under element</h5>
<!-- class selector -->
<p class="helo">i m class h5</p>
<!-- can use class in nested form -->
<p class="helo hii">i m class h5 h2</p>
<!-- id selector -->
<h3 id="id1">this is id selector</h3>
<!-- descendent selector -->
<main>
this will remain unaffected
<p>this is under descendent</p>
</main>
<!-- Child selector -->
<h1>
<p>
this is child selector
</p>
</h1>
<!-- Adjacent sibling selector -->
<main>
<p>hii this is inside main</p>
</main>
<section> this is adjacent selector</section>
<p> after section</p>
<section> section after p</section>
<!-- General sibling selector -->
<main>
<p>hii this is inside main</p>
</main>
<h3> this is general selector</h3>
<p> after section</p>
<h3> section after p</h3>
<!-- Attribute selectors -->
<a href="https://www.google.com/" target="_blank">google</a>
</body>
</html>
css file:
/* <!-- UNIVERSAL selector --> */
*{
margin: 0;
padding: 0;
background-color: rgb(111, 237, 195);
}
/* Element elector */
h1{
color: red;
}
p
{
color: blueviolet;
}
/* <!-- class selector --> */
.helo
{
color: rgb(97, 176, 17);
}
.hii
{
font-size: 70px;
}
/* id selector */
#id1
{
background-position: 65px;
color: rgb(50, 158, 204);
}
/* Selector list */
.class1 , .class2 , .class3
{
background-color: aqua;
}
/* Descendent selector */
main p
{
font-size: 50px;
font-style: oblique;
color: lightseagreen;
}
/* Child seelctor */
h1> p
{
font-style: italic;
color: rgb(36, 36, 231);
}
/* Adjacent sibling selector */
main + section
{
font-style:oblique;
font-size: 45px;
color: maroon;
}
/* General sibling selector */
main ~ h3
{
font-style:oblique;
font-size: 35px;
color: rgb(208, 234, 56);
}
/* Attribute selector */
[target="_blank"]
{
color: slateblue;
font-size: larger;
}
/* And css selector*/
.class + #element {
color: red;
}
lt. 12 link: https://hashnode.com/post/cloag2zx4000409jx7ett48k3