Selectors in css
In this article we are going to learn about selectors in css, how we can select specific html elements so that we can style them according to our requirements.
We learnt about css in general, fonts, colors, background colors, borders, margin, padding, float, width, minimum width, maximum width, height, minimum height, maximum height, scroll, inline css, internal css, external css so, we will be focusing on selectors..
HTML element selector
We can use html element as a selector and style an element according to our requirements. HTML element selector can select all elements which are identical for example, if we select div element all div elements in that webpage will be affected or selected.
Let us create a div element and select it using html elemenet selector, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
div {
color: white;
background: orange;
}
<style/>
</head>
<body>
<div>This is a div element selected using html element selector.</div>
</body>
</html>
So, we should have the following results.
Class selector
We can use class as a selector of a specific html element with a specific class attribute and style an element according to our requirements. Class selector is the most helpful selector as we can select more than one html elements in each webpage with one class attribute and we use (.).
Let us create a div element and select it using class selector, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.example {
color: white;
background: orange;
}
<style/>
</head>
<body>
<div class="example">This is a div element selected using class selector.</div>
</body>
</html>
So, we should have the following results.
Id selector
We can use id as a selector of a specific html element with a specific id attribute and style an element according to our requirements. Id selector sould be unique, meaning in each webpage all id(s) should be unique cannot be the same with other id(s) and we use (#).
Let us create a div element and select it using id selector, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
#example {
color: white;
background: orange;
}
<style/>
</head>
<body>
<div id="example">This is a div element selected using id selector.</div>
</body>
</html>
So, we should have the following results and if we create more than one div elements with same id, the style will not take effect or work because id attribute should be unigue.
Empty selector
We can use empty selector to select a specific empty html element and an empty element is the element which does not have child or empty space between tags and it can have comments because comments are not considered and we use (:empty).
Let us create a div element and select it using id selector, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
div:empty {
color: white;
background: orange;
width: 100%;
height: 70px;
}
<style/>
</head>
<body>
<!-- This is an empty div element. -->
<div></div>
<!-- This is not an empty div element because of white or empty space between tags. -->
<div>
</div>
<!-- This is an empty div element because comments are not considered. -->
<div> <!-- This is an empty div element. --> </div>
</body>
</html>
So, we should have the following results and we can see that our div element does not have content which proves that is empty with blank space.