4) One element type selector
This selector must match one or more HTML elements of the same name.
No Syntax
<html>
<head>
<style>
p
{
background-color:Bisque
}
div
{
font-size: 80px
}
h1
{
color:DeepPink
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<p> My name is Donald.</p>
<p> I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>
h1,h2,h3 {
color: darkred; /* color of h1 h2 h3 should be darkred */
font-variant: small-caps; /* h1 h2 h3 should be in small caps */
} - See more at: http://www.w3resource.com/css/selectors/grouping-of-CSS-selectors.php#sthash.oWMhgKs5.dpuf
<html>
<head>
<style>
h1
{
font-family:"Times New Roman",Georgia,Serif;
border-style: solid;
border-color: red
}
.tagline
{
border-bottom-style: dotted;
color: green
}
#intro
{
background: #dddddd;
border-radius: 40px;
padding: 10px 40px;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage - Type Selector - Selects an element by it’s type </h1>
<div id="intro">
<p> I am id Start here </p>
<p class="tagline"> I am class start here and also end here </p>
<p> I am id End here </p>
</div>
5) Grouping Selector
This selector make group of all HTML elements.
No Syntax
<html>
<head>
<style>
h1,p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>
<html>
<head>
<style>
h1, .tagline, #intro
{
font-family:"Times New Roman",Georgia,Serif;
border-style: dotted;
border-color: violet
}
</style>
</head>
<body>
<h1>Welcome to My Homepage - Type Selector - Selects an element by it’s type </h1>
<div id="intro">
<p> I am id Start here </p>
<p class="tagline"> I am class start here and also end here </p>
<p> I am id End here </p>
</div>
</body>
</html>
6) General Sibling Combinator
The element1~element2 selector matches occurrences of element2 that are preceded by element1.
A general sibling combinator matches elements based on sibling relationships.
<html>
<head>
<style>
h1 ~ p {
margin-left: 200px;
}
</style>
</head>
<body>
<h1>This is heading </h1>
<p> Now i have realtionship with h1 </p>
<p> Now i have realtionship with h1</p>
<p> Now i have realtionship with h1</p>
<div>
<p> Now i do no have realtionship with h1</p>
</div>
<p>Now i have realtionship with h1.</p>
<span>
<p> Now i do no have realtionship with h1</p>
</span>
<p>Now i have realtionship with h1.</p>
</body>
</html>
<html>
<head>
<style>
p~ul {
background: #ff0000;
}
</style>
</head>
<body>
<div> A div element.</div>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<p>The first paragraph.</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<div> B div element.</div>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<div> c div element.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
<div> D div element.</div>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
7) Adjacent Sibling Combinator
The element+element selector is used to select elements that is placed immediately after (not inside) the first specified element.
No Syntax
<html>
<head>
<style>
p + p {
text-indent: 6em;
margin-bottom: 0;
}
</style>
</head>
<body>
<h1>This is heading </h1>
<p> p is that is not placed immediately </p>
<p> p is that is placed immediately after....</p>
<p> p is that is placed immediately after....</p>
<div> </div>
<p> p is that is not placed immediately </p>
<p>p is that is placed immediately after....</p>
<div> </div>
<p> p is that is not placed immediately </p>
<p>p is that is placed immediately after.....</p>
<div>
<p> p is that is not placed immediately </p>
<p> p is that is placed immediately after....</p>
</div>
</body>
</html>
<html>
<head>
<style>
div+p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
<p>I will not be styled.</p>
</body>
</html>
No comments:
Post a Comment