473,666 Members | 2,167 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Calculating CSS Selector Specificity

The CSS 2.1 Specification describes how to sort a list of selectors in
order of specificity, but it doesn't provide a method to calculate the
specificity of a single selector in isolation.

I've devised a method to do this, which I describe in the following
article:

http://calculating-css-selector-spec....blogspot.com/

Comments and/or criticisms welcome.

Aug 25 '06 #1
8 2325
sa***@fendoo.co m wrote:
The CSS 2.1 Specification describes how to sort a list of selectors in
order of specificity, but it doesn't provide a method to calculate the
specificity of a single selector in isolation.
Of course they do. www.w3.org/TR/CSS2/cascade.html#specificity
>
I've devised a method to do this, which I describe in the following
article:

http://calculating-css-selector-spec....blogspot.com/
In which you wrote, "A method currently popular is to simply concatenate
the numbers a, b, c and d into a single decimal number

Selector Specificity Specificity Value
p#title.red 0, 1, 1, 1 0111 = 111

But this method fails if one of b, c, or d is greater than 9."

This demonstrates that you overlooked their examples, in which they did
exactly this--concatenating the numbers, treating them as digits base
10--and the part where they wrote "in a number system with a large
base", which deals head-on with the case where any of the numbers is
greater than 9. In other words, this isn't a "method currently popular".
It's the way the computation was defined.
Aug 25 '06 #2
sa***@fendoo.co m wrote:
The CSS 2.1 Specification describes how to sort a list of selectors in
order of specificity, but it doesn't provide a method to calculate the
specificity of a single selector in isolation.
Yes it does, although it doesn't exactly result in a "number" in the
strictest mathematical or physical sense, considering its base might as
well be infinity. And why is such a calculation important? Why would
anyone need to know how specific a selector is unless they need to know
whether it "wins" over another selector? That's kind of like trying to
measure the "absolute voltage" of something -- voltage is always
measured as a difference in potential between two points.

--
Vid the Kid

Aug 26 '06 #3
On 25 Aug 2006 00:58:41 -0700, sa***@fendoo.co m wrote:
>The CSS 2.1 Specification describes how to sort a list of selectors in
order of specificity, but it doesn't provide a method to calculate the
specificity of a single selector in isolation.

I've devised a method to do this, which I describe in the following
article:

http://calculating-css-selector-spec....blogspot.com/

Comments and/or criticisms welcome.
What do you plan to do with these numbers when you have calculated them?
The "specificit y of a single selector in isolation" appears to be a
meaningless concept. A single selector in isolation will always be
applied.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Aug 26 '06 #4
But this method fails if one of b, c, or d is greater than 9."
>
This demonstrates that you overlooked their examples, in which they did
exactly this--concatenating the numbers, treating them as digits base
10--and the part where they wrote "in a number system with a large
base", which deals head-on with the case where any of the numbers is
greater than 9. In other words, this isn't a "method currently popular".
It's the way the computation was defined.
Harlan, you are refering to the CSS 2 specification.

The CSS 2.1 Specification switched to defining the specificity of a
selector as comma-delimited quad of integers for the precise reason I
give.

Follow the linke below for more information:

http://meyerweb.com/eric/css/link-specificity.html

Aug 28 '06 #5
Yes it does, although it doesn't exactly result in a "number" in the
strictest mathematical or physical sense, considering its base might as
well be infinity.
You're right, it does.

But my point is precisely the fact that the definition doesn't result
in a number.
And why is such a calculation important? Why would
anyone need to know how specific a selector is unless they need to know
whether it "wins" over another selector?
I don't know if it's important or not.

All I'm saying is: here's a way to do it if you think you'll find it
useful.
>That's kind of like trying to
measure the "absolute voltage" of something -- voltage is always
measured as a difference in potential between two points.
Voltage and other physical units may be relative but specificity isn't.
My article demonstrates this precise fact !

viz. Specificity is more like the abstract concept of number, you can
refer to the absolute specificity of a selector in the same sense that
you can refer to the absolute size of a number.

Aug 28 '06 #6
sa***@fendoo.co m wrote:
But this method fails if one of b, c, or d is greater than 9."
This demonstrates that you overlooked their examples, in which they did
exactly this--concatenating the numbers, treating them as digits base
10--and the part where they wrote "in a number system with a large
base", which deals head-on with the case where any of the numbers is
greater than 9. In other words, this isn't a "method currently popular".
It's the way the computation was defined.

Harlan, you are refering to the CSS 2 specification.

The CSS 2.1 Specification switched to defining the specificity of a
selector as comma-delimited quad of integers for the precise reason I
give.
Hmm, don't know why my link wasn't updated. It doesn't matter, though.
What you wrote is what 2.0 had, and I figure they dropped it from 2.1
because while it was meant to help explain it, it probably just caused
more confusion, and for no purpose, because as has been pointed out to
you, an absolute number doesn't mean anything.

How do you compare numbers you see on paper? How do you alphabetize
words? By exactly the same process used in the spec for the
comma-separated numbers. The only difference between the comma-separated
convention and the rendering of a number to some base is the presence or
absence of the commas! Conceptualizing the specificity as an absolute
number rather than as a set of values adds nothing.
Aug 28 '06 #7
What do you plan to do with these numbers when you have calculated them?

I don't know.

It's just something I'm placing in the public domain which other people
might find useful.
The "specificit y of a single selector in isolation" appears to be a
meaningless concept. A single selector in isolation will always be
applied.
It's not a meaningless concept because semantically it is identical to
the comma-delimited quad notation.

Whether it's a useful concept or not, I don't know.

The posters so far in this thread (unanimously) do not seem to think
it's useful concept but maybe other people might.

Aug 28 '06 #8
sa***@fendoo.co m wrote:
>What do you plan to do with these numbers when you have calculated them?

I don't know.

It's just something I'm placing in the public domain which other people
might find useful.
W3 placed it in the public domain years ago.
Aug 28 '06 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

11
2026
by: Laurence Tureaud | last post by:
hello i'm just getting started with CSS & am reading through Eric Meyer on CSS, specifically the first chapter. he creates these styles: td#advert {stuff} #content-top td { stuff } tr td#sidetop {stuff }
5
1539
by: Harlan Messinger | last post by:
If I want to give special priority to property values I want to declare for a particular class, should .myclass.myclass.myclass.myclass.myclass.myclass.myclass.myclass.myclass { /* declarations */ } have that effect? -- Harlan Messinger
6
2243
by: martin.eyles | last post by:
I am having a problem with this page:- http://www.bytronic.com/tests/centre.html I want a nice centred paragraph, but get a justified paragraph. I expected the .centre to override the #content p, as it is later in the css file, but it doesn't. The reason I have both these rules in the css is because in general paragraphs in the content section of our pages should be justified, but
5
15785
by: Gerry Vandermaesen | last post by:
Hi, I'm trying out the following: CSS .className { width: 30px; height: 30px; border: 1px solid black; }
5
1346
by: Jim Garrison | last post by:
In reading someone else's stylesheet I ran across the following two selectors, in the following order. #footer .label { ... } #footer .label { ... } Are these not identical in effect? If not, I'm missing something about attribute selectors. My reasoning is that in the second selector
10
1785
by: paul.denlinger | last post by:
Hi-- I'm working my way through the book, Beginning CSS Web Development by Simon Collison. I ran into a problem on pages 17-18 (Chapter 2), I have copied and put in three rules re IDs and the <ptag. The first and second paragraphs are red, and the third paragraph should be dark gray. My problem is that all three paragraphs are red.
1
1724
by: jorgedec | last post by:
I have two test vertical menus. If I apply a border-bottom using a selecter of div.vbar a It looks fine. If I apply the border-bottom using a selecter of div.vbar ul li a
6
7193
by: _googlepost | last post by:
I have some CSS that goes something like this: table.TableStyle {font-family: "Helvetica", "Ariel"; background- color:white; border-collapse:collapse;} table.TableStyle COLGROUP { background- color:lavender;} The second line is a style that is applied to a particular named COLGROUP element in tables assigned the TableStyle class. Unfortunately, while this works in most modern browsers (including
1
1575
by: PaulShimm | last post by:
I have this simple div with a label in: <div id="TestDiv"> <label>TEST CSS</label> </div> I am applying the following CSS: div#TestDiv *
0
8360
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
8876
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8784
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8556
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8642
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7387
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6198
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5666
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4371
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.