Yogesh Chauhan's Blog

Specificity of attribute selectors

in CSS on August 23, 2020

Attribute selectors have specificity same as class selector and pseudo class.

0-1-0

Here is W3's guide on Calculating a selector’s specificity: w3.org

Quoting W3 guide here,

A selector’s specificity is calculated for a given element as follows:

count the number of ID selectors in the selector (= A)
count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= B)
count the number of type selectors and pseudo-elements in the selector (= C)
ignore the universal selector

Examples


*[type=radio] // 0-1-0

.class_name input[type="text"] { }  // 0-2-1

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 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

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
12 URLSearchParams methods in JavaScriptJavaScriptCrypto.getRandomValues() method in JavaScriptJavaScriptWhat is XP (Extreme Programming) and When should it be used?MiscellaneousHow to create a multisite network in WordPress?WordPressHow to modify the latest post array using get_posts() in WordPress?WordPressSolution to “NullInjectorError: No provider for module” in Angular 9AngularCREATE DATABASE in PostgreSQLPostgresJavaScript arrays: a separate data type or Objects?JavaScriptHow to add Go Back button in Swift 5?SwiftNATURAL JOIN in PostgresPostgresHow to create a Horizontal Scroll on button click using JavaScript?JavaScriptHow to display random posts in WordPress?WordPress