<!
DOCTYPE html>
<html lang="en">
<head>
<title>Pseudo elements</title>
<style>
p::selection {
background-color: green;
color: #fff;
}
p::first-line {
font-style: italic;
font-weight: bold;
}
p::first-letter {
font-size: 2em;
color: red;
}
input {
color: red;
}
input::placeholder {
color: cyan;
}
li::marker {
color: red;
content: "-> ";
}
h1::before {
content: "!!!";
background-color: aqua;
padding: 5px;
margin: 5px;
}
h1::after {
content: "!!!";
background-color: palegreen;
padding: 5px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Topper Skills</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae earum
perspiciatis soluta voluptates placeat voluptas, nam vitae esse nisi
dignissimos sunt assumenda doloribus unde ab. Sed voluptas voluptatem
incidunt iste.
</p>
<input type="text" placeholder="enter your name" />
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pseudo class - select based on state</title>
<style>
/ select unvisited links /
a:link {
color: red;
}
/ select visited link /
a:visited {
color: green;
}
a:hover {
background-color: orange;
padding: 2px;
text-decoration: none;
}
a:active {
color: magenta;
}
input:read-only {
border: 2px solid orange;
}
input:required {
border: 2px solid magenta;
}
input:valid {
border: 2px solid green;
}
input:invalid {
border: 2px solid red;
}
input:focus {
border: 2px solid cyan;
outline: 2px solid cyan;
}
input:checked {
border: 2px solid cyan;
}
</style>
</head>
<body>
<h1>Pseudo classes</h1>
<a href="https://www.topperskills.com">Link</a> <br />
<a href="skdjaasdffhsdkjfh">Link</a> <br />
<br />
<input type="text" value="101" readonly /> <br />
<input type="text" placeholder="enter name" required /><br />
<input type="text" minlength="4" placeholder="min 4" /> <br />
<input type="checkbox" id="ck" /> <label for="ck">check box</label>
</body>
</html>
Java, Angular, MERN Stack, Reactjs, Training Classes, Tutorials by Topper Skills
https://www.topperskills.com
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pseudo class - select by positions</title>
<style>
li:first-child {
color: red;
}
li:first-of-type {
color: green;
}
li:last-child {
color: blue;
}
li:last-of-type {
color: orange;
}
li:nth-child(2) {
color: magenta;
}
li:nth-of-type(2) {
color: cyan;
}
li:nth-last-child(3) {
color: yellow;
}
li:nth-last-of-type(3) {
color: brown;
}
li:nth-child(even) {
background-color: red;
}
li:nth-last-child(odd) {
background-color: aqua;
}
</style>
</head>
<body>
<ul>
<span>sample span</span>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<span>span</span>
</ul>
</body>
</html>
CSS Combinators
- it combines multiple selectors to select an element
there are two combinators to select child elements
1. space
- it selects all child elements which matches the right side selector
leftSelector rightSelector{
'leftSelector' selects parent element
'rightSelector' selects all child of all level
2. >
- it select all child of current level only and not nested
leftSelector > rightSelector{
'leftSelector' selects parent element
'rightSelector' selects all child of current level
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Combinators - children</title>
<style>
/ select all span on the web page /
span {
color: red;
}
/ select span which are children of div /
div span {
color: cyan;
}
/ select span which is direct child of div /
div > span {
background-color: orange;
}
/ select span which is child of paragraph /
div > p > span {
background-color: blue;
}
</style>
</head>
<body>
<div>
<p>
sample para
<span>Grand child of div</span>
</p>
<span>direct child of div</span>
</div>
<span>outer span</span>
</body>
</html>
CSS Combinator to select next Sibling elements
There are two CSS Combinators for siblings
1. +
- it select next immediate sibling
2. ~
- it selects all next sibling elements
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Combinators - sibling</title>
<style>
/ select next immediate 'span' sibling of 'div' /
div + span {
color: red;
}
/ select all 'span' which are next siblings of div /
div ~ span {
color: green;
}
</style>
</head>
<body>
<span>previous sibling 1</span>
<span>previous sibling 2</span>
<span>previous sibling 3</span>
<div>sample div</div>
<span>next sibling 1</span>
<span>next sibling 2</span>
<span>next sibling 3</span>
</body>
</html>
Welcome To Online Jewellery Shopping Store | PNG Jewellers
https://www.pngjewellers.com
<!DOCTYPE html>
<html lang="en">
<head>
<title>combinator task</title>
<style>
.item {
width: 250px;
border: 1px solid #0009;
}
.item img {
width: 100%;
}
.item .content {
padding: 5px;
display: flex;
flex-direction: column;
}
.item .content button {
visibility: hidden;
}
.item:hover button {
visibility: visible;
}
</style>
</head>
<body>
<div class="item">
<img src="assets/images/4.sm.webp" alt="" />
<div class="content">
<span>sample content</span>
<button>Read More</button>
</div>
</div>
</body>
</html>
Position property:-
- the position property is used to change the default position of the element
There are 5 types of positions
1. static (default)
2. relative
3. absolute
4. sticky
5. fixed
To move an element following properties can be used
Note: these properties does not work for static position
1. top
2. bottom
3. left
4. right
<!DOCTYPE html>
<html lang="en">
<head>
<title>relative position</title>
<style>
body {
margin: 0;
}
.box {
width: 200px;
height: 200px;
background-color: red;
top: 50px;
left: 50px;
position: relative;
/ margin-top: 50px; /
}
</style>
</head>
<body>
<h1>Relative Position</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente itaque
unde aliquid amet recusandae voluptatum rem totam adipisci! Quos numquam
ut quo quod facere provident saepe, possimus modi eos enim!
</p>
<div class="box"></div>
<span>sample span</span>
<span>sample span</span>
<span>sample span</span>
<span>sample span</span>
</body>
</html>
<!--
Relative position:-
- it reserves its initial space
- the length measurement of top, right, bottom and
left properties starts from its initial position -->
Absolute position
- it do not follows normal flow of the web page
- it free the space
- length meansurenment starts from relative parent, if there is no relative parent then
length meansurement starts from body
<!DOCTYPE html>
<html lang="en">
<head>
<title>absolute position</title>
<style>
body {
margin: 0;
}
section {
background-color: palegreen;
position: relative;
}
.box {
width: 200px;
height: 200px;
background-color: red;
padding: 10px;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<h1>Absolute position</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis impedit,
commodi saepe minus dolorum unde modi repellat odio provident assumenda,
aut nulla odit rerum perspiciatis! Consequuntur sequi dicta impedit vitae?
</p>
<section>
<span>starting span</span>
<div class="box">Box</div>
<span>sample span 2</span>
<span>sample span 3</span>
</section>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil eveniet
mollitia sint quia. Delectus laboriosam obcaecati voluptatum tempore
corporis, eos sapiente minus asperiores voluptate. Magni cum dignissimos
ducimus incidunt nisi!
</p>
</body>
</html>
