Table of contents
In this article, we will try to touch a little depth of css selectors which are frequently used and more.
Selector
A selector is the first part of the css rule which we use to target the perticular element.The element or elements which are selected by the selector are reffered to as the subject of the selector.
If you apply below given css to your file you will get a shade of grey to your paragraph.
p {
background-color: #4d4d4d4d;
}
Types of selectors
There are few different types of selectors which we use as we have to target different elements at diff. points to get right output and for better understanding of browser.
- Universal selector is the one who targets all the elements on an html page.
- The very common type which we will frequently use are element level selectors . Ex : the one of the example for this selector is given above.
- It also includes class selectors which targets class level elements.
- The elements can also targeted by using id selector.
- The attribute selectors gives us a couple of ways to target the elements even with the value of the attribute.
- There are pseudo-classes which target certain states of an element and pseudo-elements which select certain part of the element rather than the entire element.
- the final one is group of selectors which combine other selectors in order to target elements.
Now, we will study selectors in depth
Universal selector:
It targets each and every html element present in our file and apply given css accordingly. You can see the effect by loading following code into your editor,
css
<style>
*{
color: #e4e73b;
background-color: #312626;
}
</style>
html
<body>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas, voluptate!</p>
<ul>
<li>you</li>
<li>can</li>
<li>see</li>
<li>the</li>
<li>effect</li>
</ul>
</body>
Element Selector:
It selects html element specifically targeted. Sometimes it also reffered as type selector or tag name selector .
html
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In, eos quo dolorem vitae corrupti aliquam? Veniam reprehenderit blanditiis veritatis ad <em>here</em> debitis voluptatem ea <i>change</i> libero amet ratione neque aut, natus dolor.</p>
</body>
css
<style>
p {
color: red;
}
em {
color: greenyellow;
}
i {
color: blueviolet;
}
</style>
Class Selector:
Generally, class selector is used to target specific elements with the class applied.we can use it by applying a dot (.) before class name and then css rule.
Ex. In this example the highlight class's background color will change.
Html
<h1 class="highlight">hello</h1>
<p class="highlight danger">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta, adipisci!</p>
<span class="highlight pass">can you see the change</span>
css
.highlight{
background-color: #23C4ED;
}
.highlight.danger{
color:#E07C24 ;
}
.highlight.pass{
background-color:#8D3DAF;
}
we can have more than one class to target elements specifically.
id selector:
An id selector begins with # sign followed by id name. This selector should be used once per page since it has higher precedence than any other selector.
Ex. I you run this example on your machine you can see that id selector has higher precedence than universal selector.
CSS
<style>
#id{
color: brown;
}
*{
color: blue;
}
</style>
HTML
<div>
<p id="id">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam deserunt similique earum consectetur odit quaerat reiciendis, officiis doloremque quam cumque fuga suscipit excepturi totam quis velit deleniti repellat iste nostrum!</p>
<article>
this is article tag.
</article>
</div>
Attribute Selector:
Attributes gives us detail about html which is marked up.We can target elements by using attributes and its vavlues also.
- In this, to select attribute selector we just have to pass attribute name in square brackets in front of attribute name.
<style>
h1[title] {
background-color: #E21717;
}
</style>
<body>
<h1 title="one">This is heading one</h1>
</body>
- If we want to apply css on some specific value of same attribute holding by couple of elements then,
CSS
<style>
h2[title]{
background-color: #E21717;
}
h2[title~="abc"] {
color: #fff;
}
</style>
HTML
<body>
<h2 title="abc">This is heading one</h2>
<h2 title="abc">This is heading two</h2>
<h2 title="acb">This is heading three</h2>
<h2 title="mca">This is heading four</h2>
</body>
Pseudo-class & Elements:
These are the entities which are used to target certain states on elements. ex: The element being hovered by mouse pointer.
- the :first-child event of psuedo class is explained below, As we want to target the first element of article then,
html
<article>
<li>One </li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</article>
css
article li:first-child {
font-size: 200%;
color: #383CC1;
}
- when we hover over a element with mouse pointer then we can change its look by css and also the focus event can also be seen at input box OnClick event as given below,
html
<label for="hii">name </label>
<input type="text" placeholder="focus shifted here when you click here">
<button type="submit" class="btn">submit</button>
css
button.btn:hover {
height: 50px;
width: 50px;
background-color: #758283;
color: #0D0D0D;
border-radius: 5px;
}
input:focus {
background-color: #383CC1;
color: #0D0D0D;
}
Group-selector:
this type is used when more than one element have same css applied to it at this time we can save some of our valuable time by just grouping elements.
html
<body>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione, doloremque.</p>
<article>this is a articl box</article>
</body>
css
<style>
p, article{
border: 2px solid #E07C24;
}
</style>
refference:developer.mozilla.org