CSS Tutorial : Introduction of the CSS attribute selectors

CSS Tutorial : Introduction of the CSS attribute selectors

byRAYS CODING -
0

CSS provides a variety of ways to target elements on a web page, and feature selectors are among the most powerful tools in a developer’s toolkit. They allow you to choose products based on their features and qualities, allowing for flexibility and accuracy in design.

CSS Tutorial

In this article, we explore all CSS feature selectors, including their syntax, useful functionality, and advanced features.

What are the choices?

Attribute selectors are CSS selectors that target HTML elements such as "division <div>", "anchor <a>", "section<section>", and "span <span>" tags. This allows more flexibility in deployment methods than a traditional category or ID selection category.

Attribute selectors in CSS allow you to target HTML elements based on their attributes or attribute values. They are highly useful when you want to apply styles to elements with specific attributes without relying on classes or IDs. Let’s break down the basic syntax of attribute selectors and dive deeper into their types with examples.

Basic Syntax

The basic syntax for an attribute selector looks like this:

<style>
    element[attribute]
</style>

This selector targets all elements of the specified type that contain the attribute, regardless of its value. For example, to select all <input> elements with the type attribute:

<style>
    input[type] {
        border: 2px solid blue;
    }
</style>

List of Attribute Selectors

  • attribute
  • attribute="value"
  • attribute~="value"
  • attribute|="value"
  • attribute^="value"
  • attribute$="value"
  • attribute*="value"

1. attribute

In this selector, content CSS is implemented with the help of attributes of a tag. If we assume there are 6 anchor tags on a web page and we want to implement CSS on all of them, then we can implement CSS by targeting the "href" attribute on all anchor tags.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RAYS Coding :- Attribute Selecter</title>
    <style>
        body{
            background: aliceblue;
        }
        a[href] {
            color: red;
            font-size: 16px;
            text-decoration: none;
            padding: 5px;
        }
    </style>
</head>
<body>
    <h1>Targeting All Anchor Tags with 'href' Attribute</h1>
    <a href="https://example1.com">Example 1</a><br>
    <a href="https://example2.com">Example 2</a><br>
    <a href="https://example3.com">Example 3</a><br>
    <a href="https://example4.com">Example 4</a><br>
    <a href="https://example5.com">Example 5</a><br>
    <a href="https://example6.com">Example 6</a>
</body>
</html>

css tutorial


Explanation of the code

  • a[href]: This CSS rule targets all anchor (<a>) tags containing the href attribute, regardless of their value.
  • The rule sets the text color to blue, the font size to 16px, removes underlines (text-correction: none), and adds some padding to each link.

2. attribute="value"

The CSS attribute selector [attribute="value"] is a way we can target HTML elements based on their attributes and their values. This means that if an element has an attribute, such as a class, ID, or name, and its value is specific, we can use this selector to apply a style to that element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RAYS Coding :- Attribute Selecter</title>
    <style>
        body {
            background: aliceblue;
        }
        a[href="https://google.com"],
        a[id="yahoo"]
        {
            color: green;
            font-weight: bold;
            text-decoration: none;
            font-family: sans-serif;
        }
        a[id="example"]
        {
            color: red;
            font-weight: bold;
            text-decoration: none;
            font-family: sans-serif;
        }
    </style>
</head>
<body>
    <h1>Targeting Anchor Tags with Specific href Value</h1>
    <!-- Anchor tag with a specific href value -->
    <a href="https://example.com" id="example">Example Link 1</a><br>
    <!-- Anchor tag with a different href value -->
    <a href="https://google.com">Google Link</a><br>
    <!-- Another anchor tag with the specific href value -->
    <a href="https://example.com">Example Link 2</a><br>
    <!-- Anchor tag with yet another different href value -->
    <a href="https://yahoo.com" id="yahoo">Yahoo Link</a>
</body>
</html>

css tutorial

Explanation of the code

a[href="https://google.com"],

a[id="yahoo"]
{
    color: green;
    font-weight: bold;
    text-decoration: none;
    font-family: sans-serif;
}

  • a[href="https://google.com"], a[id="yahoo"]: This is a compound selector that targets:
    • Any anchor (<a>) element with the href attribute equal to https://google.com.
    • Any anchor (<a>) element with the id equal to yahoo.
  • color: green;: This sets the text color of the targeted anchor elements to green.
  • font-weight: bold;: This makes the text bold.
  • text-decoration: none;: This removes the underline that is typically applied to links.
  • font-family: sans-serif;: This sets the font style to a sans-serif typeface.

a[id="example"]
{
    color: red;
    font-weight: bold;
    text-decoration: none;
    font-family: sans-serif;
}

  • a[id="example"]: This selector targets any anchor (<a>) element whose id is the same as the example.
  • The options used here are the same as the previous rules: 
    • color: red;: sets this particular link to red with a text color.
    • font-weight: bold;: makes the text bold.
    • text-decoration: none;: Remove highlighted text from this link.
    • font-family: sans-serif;: Sets the font-style to a sans-serif typeface.

Note :- In this type of attribute selector, the value of the attribute in CSS and the value of the attribute in HTML should be same. That means if the value of the attribute is in capital letter or small letter then it should be in capital letter or small letter in CSS also.

3. attribute^="value"

In this type of attribute selector, the value used in CSS starts with or is equal to the attribute value of HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RAYS Coding: Attribute Selector</title>
    <style>
        body {
            background: aliceblue;
        }
        a[class^="example"] {
            color: red;
            font-weight: bold;
        }
        a[class^="professional_link"] {
            color: tomato;
            font-family: sans-serif;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Targeting Anchor Tags with Specific href Value</h1>
    <!-- Anchor tag with a specific href value -->
    <a href="https://example.com" class="example-link">Example Link 1</a><br>
    <!-- Anchor tag with a different href value -->
    <a href="https://facebook.com" class="professional_link">Facebook Link</a><br>
    <!-- Anchor tag with a different href value -->
    <a href="https://google.com">Google Link</a><br>
    <!-- Anchor tag with a different href value -->
    <a href="https://yahoo.com" class="professional_link">Yahoo Link</a><br>
    <!-- Another anchor tag with the specific href value -->
    <a href="https://example.com" class="example">Example Link 2</a><br>
</body>
</html>

CSS Tutorial

Explanation of the code

a[class^="example"] {
    color: red;
    font-weight: bold;
}

  • a[class^="example"] selector: This targets all <a> (anchor) elements with a class attribute starting with "example".
    • color: red;: Sets the text color of these anchor tags to red.
    • font-weight: bold;: makes the text bold.

a[class^="professional_link"] {
    color: tomato;
    font-family: sans-serif;
    font-weight: bold;
}

  • a[class^="professional_link"] selector: This targets all <a> objects with class type starting with "professional_link".
    • color: tomato;: Sets the text color in these anchor tags to tomato (red shade).
    • font-family: sans-serif;: Apply the sans-serif font style to these anchor tags.
    • font-weight: bold;: makes the text bold.

4. attribute|="value"

The CSS attribute|="value" selector targets elements whose value of a specific attribute starts with value and may be followed by a dash (-). This selector is often used for language or regional settings, where you select attributes that start with a specific prefix. Using this, you can apply styles to elements that fulfill this criterion.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RAYS Coding: Attribute Selector</title>
    <style>
        body {
            background: aliceblue;
        }
        a[class|="example"] {
            color: red;
            font-weight: bold;
            line-height: 40px;
        }
        a[class|="professional-link"] {
            color: tomato;
            font-family: sans-serif;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Targeting Anchor Tags with Specific href Value</h1>
    <!-- Anchor tag with a specific href value -->
    <a href="https://example.com" class="example-link">Example Link 1</a><br>
    <!-- Anchor tag with a different href value -->
    <a href="https://facebook.com" class="professional-link">Facebook Link</a><br>
    <!-- Anchor tag with a different href value -->
    <a href="https://google.com">Google Link</a><br>
    <!-- Anchor tag with a different href value -->
    <a href="https://yahoo.com" class="professional-link">Yahoo Link</a><br>
    <!-- Another anchor tag with the specific href value -->
    <a href="https://example.com" class="example">Example Link 2</a><br>
</body>
</html>

CSS Tutorial

Explanation of the code

a[class|="example"] {
    color: red;
    font-weight: bold;
    line-height: 40px;
}

  • Selector: a[class|='example'] means that this selector targets an anchor tag whose class attribute starts with an example or is an example with a dash (-), as in example-link.
  • Styles: 
    • Text color: The text color of the anchor tag is red.
    • Font weight: The text is made bold.
    • Line height: The line height is set to 40px, which creates more space between the text.

a[class|="professional-link"] {
    color: tomato;
    font-family: sans-serif;
    font-weight: bold;
}

  • Selector: a[class|='professional-link'] This targets anchortags whose class type starts with professional-link -link or is professional-link with a dash (-).
  • Styles: 
    • Text Color: The text color of the anchortag is tomato, which is reddish-orange.
    • Font family: The font is set to sans serif, giving it a clean, modern look.
    • Font weight: This font is also black.

5. attribute$="value"

The attribute$="value" selector in CSS means that you are targeting those elements whose value of a specific attribute ends with a particular string.
  • Attribute: This is the attribute you are checking, like class, id, src, etc. 
  • $=: This is a special operator that checks if the attribute's value ends with a string.
  • "value": This is the string you want to check.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RAYS Coding: Attribute Selector</title>
    <style>
        body {
            background: aliceblue;
        }
        a[href$=".com"] {
            color: green;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h1>Targeting Anchor Tags with Specific href Value</h1>
    <a href="https://example.com" class="example-link">Example Link 1</a><br>
    <a href="https://facebook.com" class="professional-link">Facebook Link</a><br>
    <a href="https://google.com">Google Link</a><br>
    <a href="https://yahoo.com" class="professional-link">Yahoo Link</a><br>
    <a href="https://example.com" class="example">Example Link 2</a><br>
</body>
</html>

CSS Tutorial

a[href$=".com"] {
    color: green;
    text-decoration: underline;
}

  • a[href$=".com"] selector: This selector targets all <a> (anchor) elements where the href attribute ends with .com.
    • $=: The dollar sign ($) indicates that the attribute value must end with the specified string (in this case, .com).
  • color: green;: This sets the text color of the selected anchor tags to green.
  • text-decoration: underline;: This adds an underline to the text of the selected anchor tag.

6. attribute*="value"

We use the CSS contains selector (*=) when we want to match the text given within the value of an HTML attribute, whether it is at the beginning, middle, or end of the value. Using this selector, we can style any element that contains that specific text within the attribute value.
For example, if you want to color “example” red wherever it is in the href attribute of a link, you can use *=.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RAYS Coding: Advanced Attribute Selectors</title>
    <style>
        body {
            background: aliceblue;
        }
        a[class*="professional"] {
            color: red;
            font-weight: bold;
            line-height: 30px;
        }
        a[class*="example-link"] {
            color: goldenrod;
            font-weight: bold;
            line-height: 30px;
            text-decoration: none;
            font-size: 30px;
            font-family: sans-serif;
        }
    </style>
</head>
<body>
    <h1>Targeting Anchor Tags with Advanced CSS Attribute Selectors</h1>
    <a href="https://example.com" class="example-link">Example Link 1</a><br>
    <a href="https://facebook.com" class="facebook-professional-link">Facebook Link</a><br>
    <a href="https://google.co.in">Google Link</a><br>
    <a href="https://yahoo.com" class="professional-link">Yahoo Link</a><br>
    <a href="https://example.com" class="example">Example Link 2</a><br>
</body>
</html>

CSS Tutorial

a[class*="Employee"] selector:

  • This selector targets all anchor tags (<a>) of a class attribute containing the word "professional".
  • color: red;: Sets the text color of the target links to red.
  • font-weight: bold;: makes the text bold.
  • line-height: 30px;: Sets the spacing between lines to 30 pixels, maximizing vertical spacing.
Effect: Any anchor tag in a category containing the word "professional", such as "facebook-professional-link" or "professional-link", will be set in red, black font, and the line height will be larger for readability

a[class*="example-link"] Selector:

This selector targets all anchor tags of a class containing the word "example-link".
color: goldenrod;: change the text color to goldenrod (red-brown).
font-weight: bold;: makes the text bold.
line-height: 30px;: Sets the spacing between lines to 30 pixels, similar to the previous rule.
text-decoration: none;: Remove underlined characters from links (default style for anchor tags).
font-size: 30px;: Increases font size to 30 pixels, enlarging link text.
font-family: sans-serif;: Converts fonts to sans-serif style, making them look clean and modern.

7. attribute~="value"

The CSS attribute selector attribute~="value" is used to select elements whose specified attribute contains a specific word in a space-separated list. This means that if an element's attribute (whose class) contains that word, then that element is the target. This selector is often used when we want to target elements whose attributes have one or more values. For example, if an element has the class attribute "button primary" and we use the selector class~="primary", that element will be selected. This way you can target multiple values ​​within a single attribute.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RAYS Coding :- Attribute Selector</title>
    <style>
        body {
            background: aliceblue;
        }
        a[class~="example_one"] {
            color: red;
            padding: 5px;
            border-radius: 3px;
            margin-bottom: 10px;
        }
        a[class~="highlight"] {
            line-height: 6em;
            background: black;
            padding: 5px;
            border-radius: 3px;
            color: #fff;
        }
    </style>
</head>
<body>
    <h1>Targeting Anchor Tags with Specific href Value</h1>
    <!-- Anchor tag with a specific href value -->
    <a href="https://example.com" id="example" class="highlight example_one">Example Link 1</a><br>
    <!-- Anchor tag with a different href value -->
    <a href="https://google.com" class="highlight">Google Link</a><br>
    <!-- Another anchor tag with the specific href value -->
    <a href="https://example.com">Example Link 2</a><br>
    <!-- Anchor tag with yet another different href value -->
    <a href="https://yahoo.com" id="yahoo">Yahoo Link</a>
</body>
</html>

css tutorial

Explanation of the code

a[class~="example_one"] {
    color: red;
    padding: 5px;
    border-radius: 3px;
    margin-bottom: 10px;
}

  • a[class~="example_one"]: This selector targets any anchor (<a>) element of a class containing the word "example_one".
  • color: red;: This sets the font color in these links to red, making them stand out.
  • padding: 5px;: This adds 5 pixels to the link, making it visible by increasing its clickable area.
  • border-radius: 3px;: This rounds the corners of anchor elements to 3 pixels, giving them a smooth, modern look.
  • margin-bottom: 10px;: This adds 10-pixel space to the bottom of each link, so they don’t look too close to each other and improves readability.

a[class~="highlight"] {
    line-height: 6em;
    background: black;
    padding: 5px;
    border-radius: 3px;
    color: #fff;
}

  • a[class~="highlight"]: This selector targets any anchor (<a>) element of a class containing the word "highlight".
  • line-height: 6em;: This increases the length of each text to 6 times the font size, creating a longer link area, which increases vertical spacing and makes it easier to click
  • background: black;: This sets the background color of the target links to black, creating a strong contrast against the white text color.
  • padding: 5px;: Like the previous selector, this one adds 5 pixels to the link for a nice and usable look.
  • border-radius: 3px;: This sets link corners by 3 pixels, like the previous rule, to keep the layout symmetrical.
  • color: #fff;: This sets the text color to white (#fff), which ensures it is clearly visible on a black background.
Tags

You may like these posts

Post a Comment

Previous Post Next Post

Recent in Technology

Responsive Advertisement