Summary of common usage of CSS selectors

Article directory

First, the basic concept of [selectors]

Function : Set attributes for the selected element.
Classification

  • base selector
  • Compound selector

The basic selector

Priority: ID Selector > Class Selector > Label Selector

1. Tag selector

Features

  • For a class of labels, the description is the commonality. There is no way to describe personality by setting properties for this type of label.
  • The name of the selector is the html tag

code show as below

<style>
    p{
        font-size: 16px;
        color: blueviolet;
        font-weight: bold;
    }
</ style > 
< body > 
    < p > Today is Monday </ p > 
    < p > Today is Tuesday </ p > 
    < p > Today is Wednesday </ p > 
    < div > Today is Thursday </ div > 
    < div > Today is Friday </ div > 
</ body >

The effect is as follows

As you can see, only attributes are set for the p tag, so the div tag does not change.

2. Class selector

basic grammar

  • starting with the form .classname
  • If it is a long class name, you can use – split
  • Do not use pure numbers, or Chinese, and tag names to name class names.

Features

  • To differentiate the same label, just define two different selectors

For example~

<style>
    .one{
        color: blue;
        font-size: 20px;
    }

    .two{
        color: blueviolet;
        font-size: 16px;
    }
</ style > 
< body > 
    < p  class = "one" > This is a paragraph </ p > 
    < p  class = "two" > It's sunny today </ p > 
    < p > Today is a good day for travel </ p > 
</ body >

The effect diagram is as follows

  • Multiple tags can use the same class selector

For example~

<style>
    .one{
        color: blue;
        font-size: 20px;
    }
</ style > 
< body > 
    < p  class = "one" > this is a paragraph </ p > 
    < p  class = "one" > drink more water today </ p > 
    < div > this is a div </ div > 
</ body >

The effect diagram is as follows

  • A tag can use multiple class selectors

For example~

<style>
    .size{
        width: 200px;
        height: 200px;
        background-color: aquamarine;
    }

    .style{
        font-size: 20px;
        color:brown;
    }

    .style1{
        font-size: 10px;
        font-weight: bold;
        color: cornflowerblue;
    }
</ style > 
< body > 
    < div  class = "size style" > this is a div </ div > 
    < div  class = "size style1" > this is a new div </ div > 
</ body >

The effect diagram is as follows

Both divs have size selectors, so the length, width and background color are the same. The
difference is that the attributes in style and style1 are different because they are different selectors.

3. id selector

Similar to class selectors,

  • Start with #, in the form of #id
  • The value of the id selector is the same as the id value of an element in the html
  • id is unique and cannot be used by multiple tags

For example~

<style>
    #one{
        background-color: cadetblue;
        font-size: 17px;
        color: darkmagenta;
        width: 200px;
        height: 100px;
    }
</ style > 
< body > 
    < div  id = "one" > this is a div </ div > 
    < div > this is a new div </ div > 
</ body >

renderings

The label whose id is one has background color, font size, font color, length and width

4. Wildcard selectors

Use the definition of * to select all tags

For example~

<style>
    *{
        color: blueviolet;
        width: 200px;
        height: 100px;
        background-color: bisque;
    }
</ style > 
< body > 
    < div > this is a div </ div > 
    < div > this is a new div </ div > 
</ body >

The effect diagram is as follows

All background colors of the page will become orange, the font color will be purple, and the page length and width will be 200px 100px

Basic selector summary

Selector effect
Tag selector Select all the same tags, describe commonalities, and cannot be differentiated
class selector Select one or more tags and describe the personality of one or more tags
id selector Select a label, the same id is unique, the same as the ID number
wildcard Select all tags, set attributes for all HTML tags, use in special cases

3. Compound selector

1. Descendant selector

Also known as a containment selector, which selects a child element within a parent element

element1 element2 {style declaration}

  • Element 1 and element 2 are separated by spaces
  • Element 1 is the parent, element 2 is the child, only element 2 is selected, and element 1 is not affected

Code Sample 1

<style>
    ul li{
        color: brown;
        font-size: 20px;
    }
</style>
<body>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>

    <ol>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ol>
</body>

renderings

Modify the color and font of li in ul without affecting the color and font in ol
Code Example 2: Element 2 can be a grandchild in addition to being a son

<style>
    ul li a{
        color: brown;
        font-size: 20px;
    }
    /*
    Or write this:
    ul a{
        color: brown;
        font-size: 20px;
    }
    */
</style>

<body>
    <ul>
        <li>one</li>
        <li>two</li>
        <li><a href="#">three</a></li>
    </ul>

    <ol>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ol>
</body>

renderings

Set attributes only to the grandchild element a in the parent element
Code Example 3: Can be any combination of basic selectors (including class selectors, id selectors)

<style>
    .one li a{
        color: chartreuse;
        font-size: 20px;
    }
</style>
<body>
    <ul class="one">
        <li>one</li>
        <li>two</li>
        <li><a href="#">three</a></li>
    </ul>

    <ol>
        <li>111</li>
        <li>222</li>
    </ol>

</body>

renderings

2. Child selector

Similar to descendant selector, but can only select subtags

element1 > element2 { style declaration }

  • Use greater than sign to split
  • Only choose the son, not the grandson element

Code Example 1 (Descendant Selector)

<style>
    .one a{
        color:crimson;
        font-size: 20px;
    }
</style>
<body>
    <ul class="one">
        <li>one</li>
        <li>two</li>
        <li><a href="#">three</a></li>
    </ul>

    <ol>
        <li>111</li>
        <li>222</li>
    </ol>

</body>

renderings

Descendants will select all a tags
Code example 2 (child selector)

<style>
    .one > a{
        color:crimson;
        font-size: 20px;
    }
</style>
<body>
    <ul class="one">
        <li>one</li>
        <li>two</li>
        <li><a href="#">three</a></li>
    </ul>

    <ol>
        <li>111</li>
        <li>222</li>
    </ol>

</body>

renderings

The child selector will only select its own child tags

3. Union selector

Used to select multiple sets of labels (collective declaration)

element1, element2 { style declaration }

  • Separate multiple elements by comma , etc.
  • Indicates that element 1 and element 2 are selected at the same time
  • Any base selector can use a union selector.
  • Union selectors are recommended to be written vertically, each selector occupies a line (the last selector cannot add a comma)

Code Example 1

<style>
    div,p{
        color:rgb(220, 20, 30);
        font-size: 20px;
    }
</style>
<body>
    <ul class="one">
        <li>one</li>
        <li>two</li>
        <li><a href="#">three</a></ 
    </>liul>

</body>

renderings

Only selected div and p tags have attributes, others do not

Code Example 2

<style>
    div,p, ul>li{
        color:rgb(220, 20, 200);
        font-size: 20px;
    }
</ style > 
< body > 
    < h1 > milk </ h1 > 
    < div > fruit </ div > 
    < p > vegetables </ p > 
    < ul  class = "one" > 
        < li > radish </ li > 
        < li > greens </ li > 
        < li > < a  href = "#"> Apple </ strong>a></li>
    </ul>

</body>

renderings

Set radishes and greens to be red as well

4. Pseudo-class selector

4.1 Chaining pseudo-class selectors

  • a:link selects an unvisited link
  • a:visited selects a link that has already been visited
  • a:hover selects the link that the mouse pointer hovers over
  • a:active selects the active link (the mouse is pressed but not up)

Notice

  • Write in LVHA order
  • a:hover must be placed after a:link and a:visited to be valid
  • a:active must be placed after a:hover to be valid

<style>
    a:link {
      color: black;
      text-decoration: none; 
    }
    a:visited {
      color: green; 
    }
    a:hover {
      color: red; 
    }
    a:active {
      color: blue; 
    }
</style>
<body>
</body>

4.2 force pseudo-class selector

Select the input form element that gets focus

<style>
    .three>input:focus {
      color: red; 
    }
</style>
<body>
    <div class="three">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
    </div>
</body>

Compound selector summary

Selector effect
descendant selector Select descendant elements
child selector Select child elements
union selector Select multiple groups of labels, set the same style
Link pseudo-class selector Select links in different states
:focus pseudo-class selector select the selected element

Leave a Comment

Your email address will not be published. Required fields are marked *