YogeshChauhan . com

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]

amazon

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 add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

Sorting Object Arrays in JavaScriptJavaScriptHow to Draw a Circle in HTML5 Using Canvas Tag?HTMLUse eq() method in jQueryjQueryEssential SQL Commands We Need to KnowSQL/MySQLHow to detect the Blog Page in WordPress?WordPressRevisiting variable scope in JavaScriptJavaScriptWhat are Stored Procedures for SQL Server?SQL/MySQLWordPress: How to find all posts from a custom post type with specific custom field?WordPressHow to apply style to a specific child element using CSS?CSSJavaScript: Methods for HTML DOM classList PropertyJavaScriptHow to Draw a Text Image using JavaScript?JavaScriptWhat is the difference between float and double?Misc