gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(curriculum): Add interactive examples to How to Use the Attribute Selector to Target Elements with the lang and data-lang Attributes (#63203)

Browse Source
This commit is contained in:
Clarence Bakosi
2025-10-28 22:48:41 +01:00
committed by GitHub
parent 4a42e47e9c
commit 7338688829
1 changed files with 25 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/blocks/lecture-working-with-attribute-selectors/672c37498952920879c43de9.md
+25 -5
View File
@@ -5,22 +5,32 @@ challengeType: 19
dashedName: how-to-use-the-attribute-selector-to-target-elements-with-the-lang-and-data-lang-attributes
---
# --description--
# --interactive--
When building multilingual websites or handling custom data attributes, you often need to style elements based on the language they contain or specific data values.
When building multilingual websites or handling custom data attributes, you often need to style elements based on the language they contain or specific data values.
The `lang` and `data-lang` attributes are commonly used for these purposes, and the attribute selector in CSS allows you to apply styles based on these attributes effectively.
The `lang` 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.
The `lang` 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.
Here's an example of how you can use the attribute selector to target elements with a specific `lang` attribute:
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<p lang="en">This is an English paragraph.</p>
<p lang="fr">Ceci est un paragraphe en français.</p>
```
```css
p[lang="en"] {
font-style: italic;
}
```
:::
This CSS rule applies italic styling to any paragraph element where the `lang` attribute is set to English (`en`). This could be useful for emphasizing English text in a document that includes multiple languages.
Similarly, you can use the attribute selector to target elements with a `data-lang` attribute.
@@ -29,13 +39,23 @@ Custom data attributes like `data-lang` are commonly used to store additional in
Here's how you can use CSS to target and style elements based on the `data-lang` attribute:
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<p data-lang="fr">Ceci est un paragraphe en français.</p>
<p data-lang="en">This is a paragraph in English.</p>
```
```css
div[data-lang="fr"] {
p[data-lang="fr"] {
color: blue;
}
```
In this case, any `div` element with a `data-lang` attribute set to French (`fr`) will have its text color changed to blue. This allows you to quickly identify and style sections of content based on the language information stored in the `data-lang` attribute.
:::
In this case, any `p` element with a `data-lang` attribute set to French (`fr`) will have its text color changed to blue. This allows you to quickly identify and style sections of content based on the language information stored in the `data-lang` attribute.
Attribute selectors like these provide a powerful way to apply conditional styling based on the metadata embedded within your HTML, making your web pages more dynamic and context-aware.