To describe differences between CSS selectors, first, we must provide basic information about them.
The most used selectors in CSS are βIDβ selector and the βclassβ selector.
Cascading Style Sheets or CSS selectors we use to target HTML elements on our web pages that we want to style.
Usually, when we styling our web pages, we can select specific elements like <h1>
, <p>
, and <ul>
, but our basic set of tags doesnβt cover every possible type of page element or layout choice.
Thatβs why we need selectorsβ¦
When applying CSS styles to an element in the HTML document, we can use different CSS selectors to target our elements.
ID SELECTOR
With βIDβ selector we can select an element by pointing out the unique ID name set with the id attribute.
The important thing if we use that selector is that can be used only once in HTML document. If we use that selector on more than one element, our code will not pass validation.
The ID selector consists of a hash (#), followed by the unique ID name of a referring HTML element.
ID selector cannot start with a number and must be at least one character long. They are also case-sensitive, and must exactly match across HTML, CSS, and JavaScript.
The ID selector in HTML document:
<div id=βelementβ>
<p>Content goes here...</p>
</div>
The ID selector in CSS document:
#element { /* this is the ID selector */
background: blue;
}
CLASS SELECTOR
When we want to style more than one object on a web page, we should be using a class selector.
It is important to say, that multiple elements in an HTML document can have the same class value. Also, a single element can have multiple class names separated by white space.
A Class selector can have any name that starts with a letter, hyphen (-), or underscore (_). We can even use numbers in class names. But a number canβt be the first character or the second character after a hyphen.
A class selector in HTML document:
<div class=βbankβ>
<p>Content goes here...</p>
</div>
In CSS a class selector starts with a dot (.), like this:
.bank { /* this is the Class selector */
text-color: red;
}
DIFFERENCES BETWEEN ID AND CLASS SELECTORS
A Web page can only have one unique ID (#) applied to one specific element.
Look at the example when to use ID:
HTML
<div id="image1"></div>
<div id="image2"></div>
<div id="image3"></div>
CSS
#image1 {width: 250px; height: 250px; float: left;}
#image2 {width: 250px; height: 250px; float: left;}
#image3 {width: 250px; height: 250px; float: left;}
Yet, a class we can use multiple elements:
HTML
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
CSS
.slider {width: 250px; height: 250px; float: right;}
There are no browser defaults by adding a class name or ID to an element. Both of them donβt have any default styling information to them all by themselves. They need CSS to select them and apply to style.
ID selector have one special ability in the browser, that class selector doesnβt have. ID selector marked with βhash value (#)β in URL (http://domainname.com#categories), make a browser attempt to locate the element with an ID of βcategoriesβ in a web page and scroll the page to show that element.
Instead of a conclusion, we can say, that is a very good idea having both an ID and a Class selector on a single element.
Letβs see an example:
HTML
<ul id=βlistβ class=βnumberβ></ul>
With an element, that have ID and class as a selector, we can style all elements with the same class and style specific element with a specific ID selector.
Top comments (0)