Login With Github

CSS Selectors

The CSS selector specifies the HTML elements that need to define the style. The CSS selector mainly has the following 6 types:

  • Element selector
  • Id selector
  • Class selector
  • Attribute selector
  • Descendant selector
  • Child selector

Element Selector

The element selector directly uses the element name to select the HTML element.

The following code allows you to define a centered, red style for all <p> elements in the page:

p {
    text-align: center;
    color: red;
}

Id Selector

The id selector uses the id attribute of the HTML element to select the specific element.

The id selector can only select one HTML element because the id attribute value must be unique in an HTML document.

The id selector starts with "#" followed by the id attribute value.The following CSS code defines the style of the HTML element with id="content":

#content {
    text-align: center;
    color: black;
    font-size: 14px;
}

Note 1: The id attribute value is case-sensitive.

Note 2: The id attribute value cannot start with a number.

Class Selector

The class selector uses the class attribute of the HTML element to select several elements.

Unlike the id selector, the class selector can select multiple HTML elements.

The class selector starts with "." followed by the class name.The following CSS code defines the style of the HTML element with class="center":

.center {
    text-align: center;
    color: blue;
    font-weight: blod;
}

You can also define styles for specific HTML elements that use the same class name, such as defining styles for <p> elements with class="center":

p.center {
    text-align: center;
    color: blue;
    font-weight: blod;
}

Each element can define more than one class. From the following example we can see that the second <p> element defines two classes whose names are "center" and "large":

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
    text-align: center;
    color: red;
}

p.large {

    font-size: 300%;

}
</style>
</head>

<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>
</body>

</html>

Note 1: Class attribute values are case-sensitive.

Note 2: The value of the class attribute cannot start with a number.

Attribute Selector

The attribute selector uses the specified attributes of the HTML element to select several elements, not only the class attribute and the id attribute.

Example 1: Set all elements with a title attribute to red

*[title] {
    color:red;
}

Example 2: Set the <a> element with an href attribute to red

a[href] {
    color:red;
}

Example 3: Set the <a> element with both an href attribute and a title attribute to red

a[href][title] {
    color:red;
}

Example 4: If the <a> element's href attribute value is a specific value, set the <a> element to red

a[href="https://www.tutorialdocs.com/tutorials/css/default.html"] {
    color: red;
}

Example 5: If the <a> element's href attribute value and title attribute value are both specific values, set the <a> element to red

a[href="https://www.tutorialdocs.com/"][title="TutorialDocs"] {
    color: red;
}

Example 6: If the <p> element's class attribute value contains "important", set the <p> element to red

p[class~="important"] {
    color: red;
}

Example 7: If the HTML element's lang attribute value is "en" or begins with "en-", set the element to red

*[lang|="en"] {
    color: red;
}

Descendant Selector

The descendant selector can choose the descendant elements of the HTML element.

If you only want to set the <em> element in the <h1> element to red, you can write it like this:

<!DOCTYPE html>
<html>
<head>
<style>
h1 em {
    color:red;
}
</style>
</head>
<body>

<h1>This is a <em>important</em> heading</h1>

<p>This is a <em>important</em> paragraph.</p>

</body>
</html>

The above rule will turn the text of the <em> element of the <h1> element into red. Text in other <em> elements (such as <em> elements in paragraphs) will not be selected by this rule.

Child Selector

Compared with descendant selectors,the child selector can only select the child elements of the specified HTML element.

If you want to apply styles only to the <strong> element of the <h1> element, you can write this:

<!DOCTYPE html>
<html>
<head>
<style>
h1 > strong {
    color:red;
}
</style>
</head>
<body>

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>

<h1>This is <em>really <strong>very</strong></em> important.</h1>

</body>
</html>

The two <strong> elements in the first <h1> element will be changed to red, but the <strong> element in the second <h1> element is unchanged.

0 Comment

temp