DEV Community: DanishOnGit

CSS Selectors & Specificity: Beginner's Guide

DanishOnGit — Sat, 05 Dec 2020 15:44:52 +0000

While styling certain elements in HTML, we notice that certain styles don't work as per our wishes. Sometimes, there occurs an error in our syntax. But sometimes not!
Therefore,here,some knowledge about CSS selectors and specificity might prove helpful.

Keep reading.

CSS Selectors:

A selector is used to 'find' the HTML element we wish to style.
There are many categories of selectors but we will focus our attention on the simplest of them.

Almost all beginners know the following list but let us revise.

Following are the simple selectors:

Element selector- eg: div, h1, p, a
Class selector- eg: .xyz , .anyname
Id selector- eg: #xyz, #anyname

Element selector:Here all <p> elements on the page will have red text colour.

p {
  color: red;
}

2.Class selector:Here all elements with class .center will have red text colour.

.center {
  color: red;
}

3.Id selector:Here the element with Id #center will have text colour red.

#center {
  color: red;
}

Now that we have revised the basics, let us try to guess the output for the following code.

HTML: <p class="para" id="para">How are you?</p>

CSS:

.para{
    color: teal;
}
#para{
    color: yellowgreen;
}
p.para#para{
    color: yellow;
}
p.para{
color: tomato;
}

What will be the colour of the output text?

Well, the answer is; output text colour will be yellow. But how did the browser decide which rule is most relevant to the element?
Here is where the concept of Specificity comes into picture.

CSS Specificity:

Specificity is the weight applied to a CSS declaration. It comes into play when there are two or more conflicting CSS rules applied to the same element (as we have seen in above problem).
What is this weight? This weight is a number which is determined by the type of CSS selectors(the simplest of which we have seen above) used to find the particular element in HTML.

Can we calculate specificity? Of course. Let us see how.

Start at 0, add 1000 for inline style attribute, add 100 for each ID selector, add 10 for each class (or pseudo-class) attribute, add 1 for each element name (or pseudo-element).

NOTE: Inline style means styling which is applied directly to the element in your HTML file . Eg:

<h2 style="color:red;"> Hello world</h2>

Inline styles have highest specificity and hence override any other style in external sheet (unless we find any !important rule.)

Let us see our earlier problem again:

HTML: <p class="para" id="para">How are you?</p>

CSS:

.para{
    color: teal;
}
#para{
    color: yellowgreen;
}
p.para#para{
    color: yellow;
}
p.para{
color: tomato;
}

Here,

.para declaration has specificity = 10
#para declaration has specificity = 100
p.para#para declaration has specificity = 1+10+100= 111
p.para declaration has specificity = 1+10= 11

Hence, the third rule which has the highest specificity is finally applied!

So, to summarize, ascending order of specificity is:

Universal selector * has zero specificity
Elements (& pseudo-elements) have specificity 1
Class selector (& attributes & pseudo-classes) has specificity 10
Id selector has specificity 100
Inline styles have specificity 1000
If two or more than two rules have equal specificity then the last rule in the CSS is applied.

So, the next time a certain element doesn't get styled as per our wish, changing the specificity can come in handy!
Keep Learning !

'.com',The King of TLDs?

DanishOnGit — Thu, 26 Nov 2020 18:24:12 +0000

All websites we visit have a domain name. There is one part of it which we all are familiar with, the '.com'. What is with '.com' that makes it so much popular? Should all websites go for a '.com'? Is not having a '.com' disadvantageous?

This article focuses on such questions around the '.com'.
Keep reading.

What is a TLD?

A top-level domain (TLD) is the last segment of a domain name, i.e. the element located after the last dot. It is also known as a 'domain suffix' or 'URL extension'.
Let us understand with an example domain name-
store.mywebsite.com

store- is the subdomain
mywebsite- is the second-level domain
.com-is the top-level domain

A TLD can help you identify the purpose of a website or even the geographic location. In the above example, .com shows that the site is a commercial site.

You can read more about TLDs Here.

There are a numerous TLDs to choose from for your domain name, but .com remains the most popular for most users.

Why?
Let's see.

Reasons for the popularity of '.com'.

1) It is important for branding and authority:
If you can get it, then get it. The reason the giants have the .com is because it is necessary to demonstrate authority, longevity and trust.

2) It's one of the earliest TLDs:
The .com domain extension has been synonymous with the internet since the “dot-com bubble” in the late 1990s. Over 45% of all registered domain names are .com domains. A lot of other TLDs are too recent to catch up.

3) Better click-through rate:
If you search for some information on google and you see one website with a .com and another with a .net or .biz, which one do you choose to click on? Assuming you know nothing about both websites, you are more likely to click on the website with the .com version.

4) Better resale value:
Buying a .com is an investment too. Yes! You read that right. Resale value of .com is 5x-100x higher than any equivalent keyword with a different extension! Especially if it's a catchy combination of words.

5) It's a blank canvas:
Having a .com gives a business the widest range of branding options. Building on, say, .pizza or .club imposes certain limits on brand identity.

Hence, the .com still remains the most popular among all TLDs though its availability is limited and can turn out to be extremely expensive in certain cases.

So, will a non .com domain name hurt your company's business?

This is a very subjective question and can have three possible answers:

1) A non .com TLD will help customers remember your brand and serve as a unique differentiator which helps you stand out from the crowd:
A good example here can be the .io TLD. This is pretty much in vogue these days among mostly tech-startups. However it doesn't have much mass consumer appeal.
Similarly, you can have .pizza, .club and many more.

2) A non .com TLD will make your brand seem suspect and less reputable:
Seeing a non .com site automatically makes people notice it. Some may even choose to not click on it just because they don't feel good about the non .com domain name.

3)Customers won’t notice your TLD or won’t care about it:
This scenario is also quite possible. A fine example is Behance. It sports a .net extension and is doing fine with it.

Another concern with a non .com TLD is related to SEO. Will a non .com domain hurt my SEO ranking?
Here's the answer:Google's Guide on Traditional vs New domain endings says, "Using a new domain ending will not hurt your search presence."

In other words, .com domains do not rank higher because of their TLD. However, they may indirectly rank higher due to Google's preference for aged brands. An aged brand is a website or a company with a long track record of quality content, frequent updates and technical uptime. And most aged brands are likely to be a .com. So if you are thinking of purchasing an existing website, a .com domain name might indirectly provide more search value.

Closing thoughts:

A .com domain is not needed by everyone. It is desirable if you have a B2B business. In fact, having a new TLD can help your brand stand out. But what is more important is creating a brand that you believe in rather than worrying about your TLD.
Finally, it's always possible that your TLD won't affect your brand positively or negatively.