Basic CSS Selectors and a Free Quiz (to test learnings).
Let's start with the introduction.
CSS selectors are used to define(select) your desired elements, once defined you can style those elements with a set of CSS rules or you can also use them to write JavaScript.
With the help of selectors, it becomes very simple to target Single/Multiple HTML elements. CSS or JS the basic rules can be used for both hence it is very important for us to study them. Let's cover them briefly
- Universal selector: Selects all the elements in the HTML file.
In the below example all elements will be selected and their color will be red.
* {
color: red;
}
2) Type selector:
It selects all the elements in a file having the specified element name. You can use any element-name like input, h1, a, etc
In the below example all paragraph (p) elements will be selected and their color will be red.
p {
color: red;
}
3) Class Selector:
It selects all the elements having the specified class attribute. In the below example all elements which have classname as "index" will get selected. Class names can be set as any name you wish to set.
A single element can have multiple class names (eg. class="class-one class-two") just include space between the two.
Syntax: ".className"
.className {
Color: blue;
}
4) id selectors:
It selects the element (unique/only one) having the specified "id" attribute. Here an important point to remember is you can only select a Single Unique element having that same unique id.
Unlike both of the above selectors, you can't select multiple elements with id selector because id by its very nature is unique.
Syntax: "#idName"
#idName {
background-color: skyblue;
}
5) Attribute selector:
Selects all the elements that have the specified attribute. Elements can also be selected using [attribute="value"] type.
Syntax:
a[href] {
color: purple;
}
In the above example it will select all anchor elements that have an attribute named "href" like ( <a href="https://www.google.com">Google Link</a> )
Types of Attribute selectors:
**using a (anchor tag) here just as an example you can use any preferred element tag**
Often used
- a[attr]: Selects all the a tags that have "href" as an attribute.
- a[attr=value] : Selects all the elements that have the specified attribute and value.
Not often used.
- a[attr^=value]: Selects all the elements that have the specified attribute and whose value starts by value.
Eg. a[href^="#"] {
color: red;
}will select all a tags whose href attribute value starts with "#" like (<a href="#outside"> outside </a>)
- a[attr$=value]: Selects all the elements that have the specified attribute and whose value ends with value.
Eg. [attr$=".com"] {
color: red;
}will select all a tags whose href attribute value ends with ".com" like (<a href="https://www.google.com"> Google </a>)
- a[attr*=value]: Selects all the elements that have the specified attribute and whose value includes alt least one occurrence of value
Eg. img[alt*="of"] {
width: 380px;
}it selects all img tags whose alt attribute value includes "of" at least once like (<img alt="image of cat" />).
Quiz: Now that you have learned so much about CSS selectors, let’s test your learnings, take a free Quiz. Click Here.
Contact:
Disclaimer:
The views and opinions expressed on this blog are those of the authors, this blog does not provide any medical or legal advice and is just for informational purposes, content provided by the author is of their opinion and is not intended to hurt anyone, disrespect anyone, malign any religion, ethnic group, club, organization, company, individual, or anyone or anything.
