selectors sample (8f6e7a90) · Commits · Thangaraj G / html

selectors.html

0 → 100644

+71 −0

Original line number	Diff line number	Diff line
		<!DOCTYPE html>
		<html lang="en">
		<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		4types of selectors 1.descendant selectors(space) 2.child selectors(>)
		3.adjacent sibling selectors(+) 4.general silibling selectors(~)
		<style>
		div p {
		color: yellow;
		}
		div > p {
		color: red;
		}
		div + p {
		color: aqua;
		}
		div ~ p {
		color: violet;
		}
		h1:first-of-type {
		color: red;
		}
		h1:first-letter {
		color: green;
		}

		li::marker {
		color: red;
		}
		h1:hover {
		color: tomato;
		cursor: pointer;
		}
		div a:visited {
		color: orange;
		}
		div a:hover {
		color: aqua;
		}
		a:active {
		color: yellow;
		}
		</style>
		</head>
		<body>
		<div>
		<p>1 selectors</p>
		<p>2 selectors</p>
		<section>
		<p>3 selectors</p>
		</section>
		<p>slectors</p>
		</div>
		<p>4 selectors</p>
		<p>5 selectors</p>
		<h1>The world is become large</h1>
		<ul>
		<li>home</li>
		<li>home</li>
		<li>home</li>
		</ul>
		<div>
		The movement of the war
		<a href="#"> click me</a>
		</div>
		<a href="#"> like me</a>
		</body>
		</html>