CSS selectors allows you to select and manipulate HTML elements.
CSS selectors are used to find some element based on their ID, class, group and much more.
There are different types of CSS selectors.
CSS selectors are used to find some element based on their ID, class, group and much more.
There are different types of CSS selectors.
- Element Selector
- ID Selector
- Class Selector
- Grouping Selectors
Element Selector: The element selector, selects elements based on the names of elements (HTML tags). Using element selector you can select multiple elements with the same name at a time.
p {
color: red;
text-align: center;
}
The p is the name of an HTML element.
Like this you can also select h element or h1 element.
ID Selector: The ID Selector selects the elements based on their IDs. ID Selector is used to select a single unique element on a document. So, an ID must be unique in a single document.
To find some element by its ID. Place an hash (#) tag followed by the ID of that element.
Lest assume we have some element with id="colorit" ...
#colorit {
font-family: 'Arial';
color: red;
}
Class Selector: The class selector selects elements with the specific classes. The class selector uses HTML class attribute.
To find some element with specific class, use period character (.), followed by the class name.
A document can contain more than one elements belonging to the same class.
Suppose we have some elements with class="freak" ...
.freak {
text-align: center;
color: red;
font-family: 'Arial';
}
You can also specify that only specific element should be affected by some class.
p.freak {
text-align: center;
color: red;
font-family: 'Arial';
}
Grouping Selector: Sometimes there are some elements with the same style.
We can define same formatting for multiple elements.
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: green;
}
p {
text-align: center;
color: red;
}
To minimize the code we can group the elements. Just separate each element by putting a comma between elements.
h1, h2, p {
color: red;
text-align: center;
font-family: 'Arial';
}
To learn more about CSS Selectors, visit: http://www.w3.org/TR/CSS2/selector.html
Download the Example file here...
Muhammad Arslan Aslam
I am a Full Time Student and occasional blogger. Software Engineering student with wide experience and interest in Front-End Web Development. You can find me on my profiles listed below and can get in touch any time.
Get Free Email Updates to your Inbox!
Post a Comment
Suggestions will be greeted.