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

Recently Posted

#Dec 4 What is Etrieve Flow? #Dec 2 The unique operator($) in Envision Basic #Nov 25 Steps to Install Microsoft SQL Server on a MacOS #Nov 11 What is DevOps? #Nov 10 The * arithmetic operator in Envision Basic #Nov 10 What are Big Data Clusters in SQL Server?
You might also like these
How to get category name using post id in WordPress?WordPressWordPress Plugin: Things to knowWordPressStyling Lists with CSSCSSHow to select an element using its ID without the high specificity of the ID selector?CSSThe difference between isFinite() method and isFinite() function in JavaScriptJavaScriptHow to implement NSNumberFormatter in Swift for currency?SwiftHTML Copyright SymbolHTMLHow to Draw a Text Image using JavaScript?JavaScriptWhat Is a Graph Database?MiscellaneousHow to change style of nth-child using jQuery?jQueryHow to create HTML elements with ID and class using JavaScript?HTMLHow to add transparent text on top of an image using CSS?CSS