Yogesh Chauhan's Blog

CSS Attribute Selectors

in CSS on 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]


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to Use password_hash and password_verify to Secure Your User’s Data (Especially Passwords)?PHPHow to make a curtain slider using jQuery and CSS?CSSHow to add navigation menu in Angular 9 app?AngularA Quick Comparison of JOIN and Subquery in SQLSQL/MySQLHow to Use Aggregate Functions (MIN, MAX, SUM, AVG, COUNT) to Summarize Data in SQL?SQL/MySQLSQL Basics: What does the asterisk (*) mean in a query?SQL/MySQLCrypto.getRandomValues() method in JavaScriptJavaScriptHow to get previous days or next days in PHP?PHPDynamically generate names in SCSS (animation example)SCSSCasting in PostgreSQLPostgres:in-range and :out-of-range selector in CSSCSSrandom function in SCSS (Sass)SCSS