A Look At the CSS Selectors
As seen earlier, now we know that a Cascading Style Sheet (CSS) forms an integral part of web design. In this blog, we will see a few types of CSS selectors. But before that, we need to know what CSS selectors are. So, let's begin with the same.Introduction to CSS Selectors:
A CSS selector is the component of a CSS rule set that really chooses the content you need to style. How about we take a gander at some of the types of selectors present, with a concise portrayal of each.1. Universal Selector:
The universal selector functions like a wild card character, choosing all elements on a page. Each HTML page is based on content set inside HTML tags. Each group of tags is for an element on the page. Take a gander at the accompanying CSS illustration, which utilizes the universal selector:* {
colour: green;
font-size: 18px;
line-height: 20px;
}
The three lines of code inside the curly brackets (font size, color and line-height) will apply to all components on the HTML page. As observed here, the universal selector is proclaimed utilizing an asterix. You can likewise utilize the universal selector in blend with other selectors.
2. ID Selector:
An ID selector is declared utilizing a hash, or a pound sign(#) going before a series of characters. The series of characters is defined by the developer. This selector coordinates any HTML element with an ID attribute with an indistinguishable value from that of the selector, however subtract the hash sign. Here's an illustration:#container {
width: 960px;
margin: 0 auto;
}
This CSS utilizes an ID selector to coordinate an HTML component, like,<div id="container"></div>
3. Element Type Selector:
Additionally alluded to just as a "type selector" this selector must match at least one HTML elements of a same name. Along these lines, a selector of nav would match all HTML nav components, and a selector of <ul>would match all HTML unordered lists, or<ul>elements.The accompanying illustration utilizes an element sort selector to match all <ul>components:
ul {
list-style: none;
border: solid 1px #ccc;
}
These were a few types of CSS selectors. There are a few more, which we will see sometime later.
