CSS: Attribute Selectors

Question 1

What are Attribute Selectors?

Answer 1

The attribute selector allows you to target HTML elements based on their attributes like the href or title attributes.
a[href] {
color: blue;
text-decoration: underline;
}

Question 2

What is the “title” Attribute?

Answer 2

This attribute provides additional information about an element. Here is how you can target links with the title attribute:
a[title] {
font-weight: bold;
text-decoration: none;
}

Question 3

What is the “lang” Attribute?

Answer 3

This attribute is used in HTML to specify the language of the content within an element. You might want to style elements differently based on the language they are written in, especially on a multilingual website.
p[lang=”en”] {
font-style: italic;
}

Question 4

What is the “data-lang” Attribute?

Answer 4

Custom data attributes like the data-lang attribute are commonly used to store additional information in elements, such as specifying the language used within a specific section of text. Here is how you can style elements based on the data-lang attribute:
div[data-lang=”fr”] {
color: blue;
}