Specific usage of CSS compound selectors

Intersection Selector

The intersection selector is composed of two selectors directly connected, where the first selector must be an element selector, and the second selector must be a class selector or an ID selector. The two selectors must be written continuously without any spaces.
The elements selected by the intersection selector must be of the element type specified by the first selector, and the element must contain the ID name or class name corresponding to the second selector. The style of the elements selected by the intersection selector is the style of the three selectors, namely the first selector;

grammar:

Element selector. Class selector | #ID selector { 
 Attribute 1: attribute value 1;
 Attribute2: attribute value 2;
}

Syntax description: "Class selector | ID selector" means using the class selector or the ID selector.

example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Using the intersection selector to set styles</title>
<style>
/* Element selector sets border and bottom margin styles*/
div { 
 border: 5px solid red;
 margin-bottom:20px;
}
/* Set the background color of the intersection selector */
div.txt { 
 background:#33FFCC;
}
/* Class selector to set font format */ 
.txt { 
 font-style:italic;
}
</style>
</head>
<body>
    <div> Element selector effect</div>
    <div class="txt"> Intersection selector effect</div>
    <span class="txt">Class selector effect</p>
</body>
</html>

Union Selector

The union selector is also called a group selector or a group selector. It is composed of two or more arbitrary selectors. Different selectors are separated by "," to achieve "collective declaration" of multiple selectors.

The characteristic of the union selector is that the set style is effective for each selector in the union selector.

The function of the union selector is to extract the same styles from different selectors and put them in one place for a one-time definition, thereby simplifying the amount of CSS code.

grammar:

Selector 1,
Selector 2,
Selector 3,
 { 
     Attribute 1: attribute value 1;
     Attribute2: attribute value 2;
}

Syntax description: The selector type can be any, it can be a basic selector or a compound selector.

example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Using the union selector to set styles</title>
<style>
div {
    margin-bottom:10px;
    border:3px solid red;
}
span { 
    font-size:26px;
}
p { 
    font-style:italic;
}
/* Use the union selector to set the common style of elements */
span,
.p1,
#d1 { 
    background:#CCC;
}
</style>
</head>
<body>
     <div id="d1"> This is DIV1</div>
     <div>This is DIV2</div>
     <p class="p1"> This is paragraph 1</p>
     <p> This is paragraph 2</p>
     <span>This is a SPAN</div>
</body>
</html>

Descendant Selectors

Descendant selectors, also known as containment selectors, are used to select descendant elements of a specified element. Using descendant selectors can help us find the target element faster and more accurately.

grammar:

Selector 1 Selector 2 Selector 3 { 
    Attribute 1: attribute value 1;
 Attribute2: attribute value 2;
}

example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Setting styles using descendant selectors</title>
<style>
#box1 .p1 { /* descendant selector */
    background:#CCC;
}
#box2 p { /* descendant selector */
    background:#CFC;
}
</style>
</head>
<body>
     <div id="box1">
         <p class="p1"> Paragraph 1</p>
         <p class="p2"> Paragraph 2</p>
     </div>
     <div id="box2">
         <p class="p1"> Paragraph 3</p>
         <p> Paragraph 4 </p>
     </div>
     <p class="p1"> Paragraph 5</p>
     <p> Paragraph 6 </p>
</body>
</html>

Child selector

The descendant selector can select all descendant elements of a specified type of an element. If you only want to select all child elements of an element, you need to use the child element selector.

grammar:

selector1> selector2 {
      Attribute1: attribute value 1; 
      Attribute2: attribute value 2;
}

Syntax description: “>” is called the left-combining character, and spaces can appear on both sides of it. “Selector 1 > Selector 2” means “select all the child elements specified by selector 2 that are the elements specified by selector 1”.

example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Example of using sub-element selector</title>
<style>
h1>span {
    color:red;
}
</style>
</head>
<body>
    <h1> This is a very, very <span> important</span> and <span> critical</span> step. </h1>
    <h1> This is a really <em><span> important</span> and <span> critical</span></em> step. </h1>
</body>
</html>

Adjacent Sibling Selector

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

grammar:

selector1+selector2 {
     Attribute1: attribute value 1; 
     Attribute2: attribute value 2;
}

example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Adjacent sibling selector application example</title>
<style>
h1+p {
     color:red;
     font-weight:bold;
     margin-top:50px;
}
p+p{
     color:blue;
     text-decoration:underline;
}
</style>
</head>
<body>
     <h1>This is a first level heading</h1>
     <p> This is paragraph 1. </p>
     <p> This is paragraph 2. </p>
     <p> This is paragraph 3. </p>
</body>
</html>

Attribute Selectors

In CSS, we can also select elements based on their attributes and attribute values. The selector used at this time is called an attribute selector. There are two main forms of attribute selectors:

grammar:

Attribute selector 1 Attribute selector 2...{
     Attribute1: attribute value 1;
     Attribute2: attribute value 2;
}

Element selector Attribute selector 1 Attribute selector 2... {
     Attribute1: attribute value 1;
     Attribute2: attribute value 2;
}

Syntax description: The attribute selector is written as [attribute expression], where the attribute expression can be an attribute name or an expression such as "attribute = attribute value".

Application of attribute selectors:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Application of attribute selectors</title>
<style>
[title] {/* Select elements with a title attribute */
     color: #F6F;
}
a[href][title]{/* select a elements that have both href and title attributes*/
     font-size: 36px;
}
img[alt] {/* Select img elements with alt attribute */
     border: 3px #f00 solid;
}
p[align="center"] {/* Select p elements with align attribute equal to center*/
     color: red;
    font-weight: bold;
}
</style>
</head>
<body>
     <h2> Apply attribute selector styles: </h2>
     <h3 title="Helloworld">Helloworld</h3>
     <a title="Home"href="#"> Back to Home</a><br/><br/>
     <img src="miaov.jpg" alt="logo" />
     <p align="center"> Paragraph 1</p>
     <hr />
     <h2> No attribute selector style applied <h3>Helloworld</h3>
     <a href="#"> Back to Home Page</a><br/><br/>
     <img src="miaov.jpg">
     <p align="right"> Paragraph 2</p>
</body>
</html>

This is the end of this article about the specific usage of CSS compound selectors. For more relevant CSS compound selector content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: Detailed explanation of the case of dynamically generating tables using JavaScript

>>: The process of building lamp architecture through docker container