A css question



This is a bit off topic, but what's going on in the CSS where a style selector's name is form.form?

I understand what two classes together separated by a period refers to, combine both classes, but when both selectors are the same, that seems redundant.


Replace this line with your code.


Hi @jnl2,

That's a meaningless (and in some ways, bad) practice since it gives you CSS with odd and somewhat random specificity. I'm not sure why they're selecting it that way, but the selector there just says “Style the <form> element that also has the class of form:slight_smile:


Ok. So it's intent is to add style to the form element.

Would an alternative then be to use just the form element, in this case:

form {


@jnl2 Yup! That would have the same effect :slight_smile:


The added specificity would imply there is more than one form element in the document, or at least provision for there to be more than one, such as a plug-in.

The class name could differ between multiple forms. The part of the selector that doesn't really add value is the type.

form.form   =>  0  0  1  1

.form       =>  0  0  1  0

If there are elements of other types that also share the class,.form they will not be affected by the top selector. Of course the least specific selector is,

form        =>  0  0  0  1

When writing selectors, create very general rules for type selectors since they will apply across the board. One objective to keep in mind is minimum specificity overall. It is a design concept that takes a lot of practice to learn, but in the long run easier to maintain.

Lower specificity makes it easier to adapt new components in the future.



Ok, I'll endeavor to utilize low specificity selectors over time.

One thing that I'm not sure that I understand in your previous post is the use of what looks like matrix notation:

Is this important for me to understand this notation? If so, could you provide a brief description of how it is used or some terms to look up?

Your use of the term type to describe a characteristic of a selector is something that appears to be on the net for me to peruse.

Thanks as always.


Not really, because it is not really notation at all, just a way to express the four columns or specificity.

highest                          lowest
style       id    class          type
important         pseudo-class   pseudo-element

When determining the specificity of a selector we count the number of each and write the score in the corresponding column(s).

#main.item ul li   =>  0 1 1 2
.item ul li        =>  0 0 1 2
                   =>  0 1 0 0

Regardless what the score is in one column, if the column to its left has a score, it trumps the lower column (is said to have higher specificity, and therefore greater importance).

A type refers to an HTML element. All HTML elements fall into this category... element type.


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.