Tip:
Highlight text to annotate it
X
Hi! My name is Joseph
In this video tutorial you will learn how to use ID selector
Selector ID is a unique identifier for a html element and can be used once in a page
To define an id selector, use the hash mark followed by the name id selector.
To insert the CSS style created by an id selector in an html element , you have to use an id attribute and its value is the name of the selector id (id="id name").
The following example will show you how to use the id selector
ID selector with antet name
The inserting way of id selector in an html element, in our case div
The div element on which the css style will be applied created by id selector antet
Select and copy this code, then open a new file in Notepad + +, where to paste this code
You can mix the id selector with type (simple) selectors to add a different style to the same HTML element on a given page.
This title is red in browser because the CSS style was applied upon its created by combining an id selector and type selector h2
This title is blue in browser because the CSS style was applied upon its created by combining an id selector and type selector h2
Combining the id selector titlu with the type selector h2
Combining the id selector titlu with the type selector h2 will set red color for title
The h2 element on which the CSS style will be applied, created by combining the selectors h2 and titlu
The h2 element on which the CSS style will be applied, created by the selectors h2
The CSS style created by selector h2 that will align text in the center and will set blue color for the title.
You can also combine the id selector with multiple class selectors
The following example demonstrates how we can combine the id selector with multiple selectors class
In practice, the browsers do not check the uniqueness of the id selector
Therefore, if you use multiple HTML elements with the same value for id attribute , then perhaps the browser will apply the same css style for each element.
But, using the id selector in this way, it is not a good practice
Also, the use of multiple HTML elements with the same value for id attribute will create confusion when using JavaScript DOM.
Correct operation of some functions such as getElementById () depend on the use of a single id for an HTML element.
The Following is an example that will show you that your browser does not verify the uniqueness of the id selector, that is we will use multiple HTML elements with the same value for the id attribute .
In browser can be seen that each title has the same style because your browser does not verify the uniqueness of the id selector.
The elements h2, h3, h4 have value titlu for the id attribute.
But this way of using id selector is incorrect and confusing when using JavaScript DOM and not only.
Thank you for participating in this CSS video tutorial.