codescracker


css

CSS3 Combinators



« Previous Tutorial Next Tutorial »


Combinators in CSS3, explains the relationship between the selectors. There are four types of combinators available in CSS3:

CSS3 Descendant Selector

Here is an example of CSS3 descendant selector:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Combinators Example</title>
	<style>
		div p { background-color:black; color:white; }
	</style>
</head>
<body>

<div>
	<p>This is CSS3 Combinators Example in the div</p>
	<p>This is CSS3 Combinators Example in the div</p>
	<span><p>CSS3 Combinators Example in the div</p></span>
</div>
<p>This is CSS3 Combinators Example but Not in a div</p>
<p>This is CSS3 Combinators Example but Not in a div</p>

</body>
</html>

Here is the output produced by the above CSS3 combinator example code:

css3 descendant selectors

CSS3 Child Selector

Following is an example of CSS3 child selector:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Combinator Example</title>
	<style>
		div > p { background-color:black; color:white; }
	</style>
</head>
<body>

<div>
	<p>This is CSS3 Combinator Example in the div</p>
	<p>This is CSS3 Combinator Example in the div</p>
	<span><p>CSS3 Combinator Example in the div</p></span> <!--this paragraph is not child of div-->
</div>
<p>This is CSS3 Combinator Example but Not in a div</p>
<p>This is CSS3 Combinator Example but Not in a div</p>

</body>
</html>

Below is the sample output produced by the above CSS3 combinator example code:

css3 child selector

CSS3 Adjacent Sibling Selector

Below is an example of CSS3 adjacent sibling selector:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Combinator Example</title>
	<style>
		div + p { background-color:black; color:white; }
	</style>
</head>
<body>

<div>
	<p>This is CSS3 Combinator Example in the div</p>
	<p>This is CSS3 Combinator Example in the div</p>
	<span><p>CSS3 Combinator Example in the div</p></span> <!---this paragraph is not child of div-->
</div>
<p>This is CSS3 Combinator Example but Not in a div</p>
<p>This is CSS3 Combinator Example but Not in a div</p>

</body>
</html>

The above CSS3 combinator example code will produce the following output:

css adjacent sibling selector

CSS3 General Sibling Selector

Here is an example of CSS3 general sibling selector:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Combinator Example</title>
	<style>
		div ~ p { background-color:black; color:white; }
	</style>
</head>
<body>

<div>
	<p>This is CSS3 Combinator Example in the div</p>
	<p>This is CSS3 Combinator Example in the div</p>
	<span><p>CSS3 Combinator Example in the div</p></span> <!---this paragraph is not child of div-->
</div>
<p>This is CSS3 Combinator Example but Not in a div</p>
<p>This is CSS3 Combinator Example but Not in a div</p>

</body>
</html>

Here is the output of the above CSS3 combinator example code:

css general sibling selector

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test