Basic CSS Selectors
This article is a small guide to help you learn CSS, whether you’re just getting started with the basics or you want to explore more advanced CSS.
What are CSS Selectors?
CSS selectors are a set of rules that are used for HTML-elements stylization. There are numerous CSS selectors. In this article, we will take a look at several of them.
Universal Selector
This selector is used to select all elements on the page.
Example:
* { margin : 0; }, where * matches all the elements of the page.
Type Selector
This one is used to select all elements that are given the node name.
Example: h1 selector selects all <h1> on the page.
h1 {
...
}
Notice: To use the selector, type the label name with no “<“, “>” brackets (h1 instead of <h1>).
To apply different styles to HTML headings, use:
h1 {
font-size: 32px;
}
h2 {
color: coral ;
}
h3 {
color: black; opacity : 0.8;
}
You can bind selectors of diverse elements to apply the same style to those. To do that, write the label names separating them with a comma.
Example:
h2, h3, h4 {
color: balck ;
font-weight: Bold ;
opacity: 0.7;
font-family: Arial, Helvetica, sans-serif;
}
You can also group up diverse features to one CSS rule, and then put the exact features for the elements into it:
h2 {font -size: 25px ; }
h3 {font -size: 20px ; }
h4 {font -size : 15px ;}
Descendant combinator
This selector helps select all matching nodes that are placed in other elements.
Example. Let’s select all <span> nodes that are inside <nav> element:
<nav>
<span> txt1 </span>
<a href ="...">
<span> txt2 </span>
</ a >
</nav>
The remaining nodes of <span>, that are not included in the <nav> node, are not applied with the CSS rule.
Descendant nodes help increase the accuracy of the type or label selectors. Thus, you can apply diverse styles to the different types of nodes using the descendant selector.
Example. Let’s highlight <a> that is inside of <span>:
span a {color : black ; text-decoration: none; }
Thus:
-
All <a> nodes inside of <span> are highlighted in black;
-
The remains <a> elements that are not inside of <span> are not highlighted, these are shown in the default style;
-
The descendant selectors are always made of 2 or more selectors that are separated with spaces;
-
The last selector refers to the node to apply styles, and the previous one refers to the node’s place.
Class Selector
This one is used to select all elements that are given a class attribute.
<body>
<h1 class = ”title 1” > Lorem ipsum pain <h1>
<h1> Lorem ipsum pain </h1>
<h1> Lorem ipsum pain </h1>
</ body >
When you apply this, the new rule <title 1> is created in the CSS file. It contains all styles applied to the elements.
You can add a dot “.” to help your browser not to confuse this selector with other ones:
. title 1 { text-transform : uppercase ; }
ID Selector
It is used to select an element based on the value of its id attribute. There should be only one element with a given ID in a document.
Use “#” instead of “.” for ID selectors applying.
# main-title {text-transform: uppercase; }
<body>
<h1 id = " main -title " > Lorem ipsum pain <h1>
<h1> Lorem ipsum pain </h1>
<h1> Lorem ipsum pain </h1>
</body>
In such a case, the # selector of the main heading selects only the first one.
<h1> (whose id attribute is equal to “ main-title ” ).
That is caused by the fact that the ID feature should be unique, and two elements simply cannot have the same ID. However, class attributes may repeat for different elements.
Thus, it is better to use the ID selector when you need to apply a style to one specific element. In case you need to apply it to various elements, it is better to use the class selector.
