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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #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 create a pricing table using flex in CSS?CSSHow to remove special characters (dash, asterisk etc) from any string in PHP?PHPHow to modify navigation menus in WordPress?WordPressHow to use HTML picture Tag?HTMLHow to show confirmation alerts with OK and cancel buttons using Swift 5?SwiftLearn how to give a temporary name to a column or to a table using SQL AliasesSQL/MySQLHow to pass arguments in SCSS function?SCSSWhat is the difference between Loosely Typed Language and Strongly Typed Language?Miscellaneous10 Usability Blunders to AvoidUI/UXHow to add Local State to a Class in React?ReactWhat happened to your Google Analytics Tracking ID, can’t find it?MiscellaneousHow to CREATE TABLE in SQL with and without using Another Table?SQL/MySQL