YogeshChauhan.com

CSS Attribute Selectors

September 24, 2020

We can style HTML elements that have specific attributes or attribute values.

We can put the attribute value in single-quotes or double-quotes. It will work without quotes, but it’s not valid as per the CSS standard.

Selector Remarks
[attribute] Element with attribute
[attribute='value']  Where attribute has value attr_value
[attribute~='value'] Where value containing a specified word.
[attribute^='value'] Where attribute’s value begins with attr_value
[attribute$='value'] Where attribute’s value ends with attr_value
[attribute*='value'] Where attribute contains any_value anywhere
[attribute|='value'] Used to select elements with the specified attribute
starting with the specified value.
[attribute='value' i] Where attribute has value value, ignoring
attr_value’s letter casing. 

Examples

[attribute]

[attribute = "value"]

[attribute *= "value"]

[attribute ~= "value"]

[attribute ^= "value"]

[attribute $= "value"]

[attribute |= "value"]

[attribute="value" i]

dreamhost

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to Use SQL MAX() Function with Dates? #5 How to add Read More Read Less Button using JavaScript? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Apr 7 Solution for “Yarn build: Failed because of a stylelint error” Apr 7 Make sure your links have descriptive text Apr 7 How to add Laravel to WordPress using Sage theme (and install Tailwind CSS)? Apr 2 How to create a sidebar using pure CSS? Apr 1 How to switch dark and light themes using pure CSS? Apr 1 How to calculate elapsed time in JavaScript?

You might also like these

WordPress: How to find all posts from a custom post type with specific custom field?WordPressHow to make flexbox items of the same size?CSSHow to remove special characters (dash, asterisk etc) from any string in PHP?PHPCSS Attribute SelectorsCSS6 Different Functions to Sort Arrays in PHPPHPHow to import MySQL small sample database into phpMySQL?SQL/MySQLHow to add a scroll back to top button using JavaScript and CSS?CSSHow to create a Progress Bar using JavaScript?JavaScriptList of all Pseudo Elements in CSSCSSWordPress: How to get field values in Advanced Custom Fields?WordPressLIKE and ILIKE Operators in PostgresPostgresHow to Create a Copy of a Table in SQL and MySQL?SQL/MySQL