# Attribute selectors
The **CSS attribute selectors** selects an element from the HTML using CSS properties.

An element can be selected using the `name` attribute with the following syntax:

```
[name[^$]="element_name"]
```

In the syntax above, `^` indicates 'starts with' and `$` indicates 'ends with.'

## Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selecting element by name</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <form>
        <p><label>Student First Name: <input type="text" name="student_first_name"></label><p>
        <p><label>Student Last Name: <input type="text" name="student_last_name"></label><p>
        <p><label>Student ID: <input type="text" name="student_id"></label><p>        
        <p><label>Email Address: <input type="text" name="email"></label><p>
        <p><label>Zip Code: <input type="text" name="zip_code"></label><p>
        <button type="button">Click here</button>
    </form>
</body>
</html>

$(document).ready(function(){
    
    $("button").click(function(){
        $('[name$="_name"]').css("background-color", "green");
        
        $('[name="email"]').css("border-color", "blue");
        
        $('[name^="zip"]').css("background-color", "red");

        id_selector = document.getElementsByName('student_id');
        $(id_selector).css("background-color", "yellow");
    });    
});

codemirror

## Explanation

HTML:

The HTML consists of a form that contains four input elements. Every input element has a name associated with it. The dependency for jQuery is included in the HTML via the `script` tag in line 6.

JavaScript:

- Line 3: We define a function that triggers once the form button is clicked.
- Line 4: All the elements with their name ending as `_name` are selected using the `[input$="_name"]` selector expression. The elements with the `student_first_name` and `student_last_name` names are selected. Then, we change the background color of the elements to green.
- Line 6: All the elements with named `email` are selected using the  `[input="_name"]` selector expression. The element named `email` is selected. Then, we change the border color of the element to blue.
- Line 8: All the elements with their name starting as `zip` are selected using the  `[input^="zip"]` selector expression. The element named `zip` is selected. Then, we change the background color of the element to red.
- Lines 10–11: The element is selected using the `getElementsByName()` method of the `document` object. The selected element is passed to the `$()` selector function. This can be used as a jQuery object. The element's background color is changed to yellow.


# Attribute selectors
The **CSS attribute selectors** selects an element from the HTML using CSS properties.

An element can be selected using the `name` attribute with the following syntax:

```
[name[^$]="element_name"]
```

In the syntax above, `^` indicates 'starts with' and `＄` indicates 'ends with.'

## Example

## Explanation

HTML:

The HTML consists of a form that contains four input elements. Every input element has a name associated with it. The dependency for jQuery is included in the HTML via the `script` tag in line 6.

JavaScript:

- Line 3: We define a function that triggers once the form button is clicked.
- Line 4: All the elements with their name ending as `_name` are selected using the `[input＄="_name"]` selector expression. The elements with the `student_first_name` and `student_last_name` names are selected. Then, we change the background color of the elements to green.
- Line 6: All the elements with named `email` are selected using the  `[input="_name"]` selector expression. The element named `email` is selected. Then, we change the border color of the element to blue.
- Line 8: All the elements with their name starting as `zip` are selected using the  `[input^="zip"]` selector expression. The element named `zip` is selected. Then, we change the background color of the element to red.
- Lines 10–11: The element is selected using the `getElementsByName()` method of the `document` object. The selected element is passed to the `＄()` selector function. This can be used as a jQuery object. The element's background color is changed to yellow.


How to select an element by name with jQuery

Attribute selectors

Example

Explanation