CSS combination selectors

CSS Combination Selector

The combination selector illustrates the direct relationship between two selectors.


CSS combination selectors include various combinations of simple selectors.

Contains four combination methods in CSS3:

  • Descendant selector (separated by spaces)

  • Child element selector (separated by greater than sign)

  • Adjacent sibling selector (separated by plus sign)

  • Ordinary sibling selector (separated by dashes)


Descendant Selector

Descendant selector matches all descendants of a worthy element element.

The following example selects all p elements and inserts them into the div element:

      <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
div p
{
	background-color:yellow;
}
</style>
</head>
<body>

<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

</body>
</html>

Run the program and observe


Child element selector

Compared with descendant selectors, child selectors (Child selectors) can only select elements that are child elements of an element.

The following example selects all direct child elements<p> in the <div> element:

       <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<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>

<div>
<span><p>I will not be styled.</p></span>
</div>

<p>My best friend is Mickey.</p>
</body>
</html>

Run the program and observe


Adjacent sibling selector

The Adjacent sibling selector can select an element immediately after another element, and both have the same parent element .

If you need to select an element immediately after another element, and both have the same parent element, you can use the Adjacent sibling selector.

The following example selects all the first <p> elements after the <div> element:

  <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<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>

Run the program and observe


Ordinary adjacent sibling selector

The ordinary sibling selector selects all adjacent sibling elements of the specified element.

The following example selects all adjacent sibling elements<p> of all <div> elements:

     <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
div~p
{
	background-color:yellow;
}
</style>
</head>
<body>

<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

</body>
</html>

Run the program and observe



Continuing Learning
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> div p { background-color:yellow; } </style> </head> <body> <div> <p>段落 1。 在 div 中。</p> <p>段落 2。 在 div 中。</p> </div> <p>段落 3。不在 div 中。</p> <p>段落 4。不在 div 中。</p> </body> </html>
submitReset Code
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!