Rohini's blog
CSS Selectors & Pseudo Selectors

CSS Selectors & Pseudo Selectors

rohini polina's photo
rohini polina
·

4 min read

Table of contents

Css selectors:

The selector is the opening portion of a CSS ruleset that defines what HTML elements the declarations inside the curly braces should affect:

1)Universal CSS Selector:

Universal selector is declared using an asterisk(*). It is used to call all elements in web document.

* {
  margin: 0;   
  padding: 0;
}

2) Individual selector or Element selector :

Element selector , works on HTML tag level. When we add styling for an HTML tag directly, in our CSS file, it is known as element selectors.

p {
 color: Blue;
}
h2 {
 text-align: center;
 color: red;
}

3)Id selector& Class selector:

Id selector: The id selector is another basic selector that lets you apply styling to all specified elements with a selected id, this selector matches any HTML element that has an ID attribute .An ID selector is declared using a hash(#) symbol. 

<div id=container>This is a id selector</div>
<div class=class-one>This is a class selector</div>
</html>

Css:

#container {
   width: 960px;
   margin: 0 auto;
}

Class selector: The class selector applies styling to all elements with a specified class attribute. It is declared using a dot(.) symbol.

.class-one {
    background-color: black; 
    color: white; 
    font-style: italic;
}

4)Grouping (or) Compound Selector:

This is used to call a group of HTML Elements by tag name. This selector is indicated by a (,) comma separating the selectors of the set. Each element within the comma separated list will be styled the same.

Html:

<h1>Heading</h1>
<h2>Subheading</h2>
<div id="box">I'm a box</div>

Css:

h1, h2, #box {
  font-family: Arial, Helvetica, sans-serif;
}

5)Descendent selector:

This selects an element that is nested inside of the specified parent element. This selector is indicated by a keyboard space between the parent and the child to be selected.

Html:

<ul id="nav">
  <li>child</li>
</ul>

Css:

#nav li {
  background: blue;
}

6)General Sibling & Adjacent sibling:

Adjacent sibling(+): This is used to target first immediate next sibling of an element of same parent.

<style>
        div+p{ color:red;}
    </style>

    <div>div</div>
    <p>para 1</p>
    <p>para 2</p>

Output: only div and p1 i.e para1 get color of red.

General sibling(~): This is used to target all siblings of an element of same parent.

<style>
        div~p{ color:red;}
    </style>

    <div>div</div>
    <p>para 1</p>
    <p>para 2</p>

Output: div and both para1 and para2 will get color of red.

specificity in css selectors :

CSS Selectors Specificity is calculated on the basis of selector used. Tag selectors is having a value of 1, class selectors is having value of 10, id selector is having value of 100 and inline css is having value of 1000.


<style>       
    p{ }                        // value is 1
    div p{ }                    // value is 1+1, i.e. 2
    .para{ }                    // value is 10
    p.para{ }                   // value is 10+1, i.e. 11
    #para{ }                    // value is 100
    p#para{ }                   // value is 101
    ul.list li{ }               // value is 12

</style>

Pseudo Selectors:

What are pseudo selectors,lets seek them. There are two types of pseudo selectors

pseudo classes:

it will added to a selector to get external factors or specifies a special state.lets discuss few of them

1):hover-

selects links when the user is hovering their mouse over the link.

<style>  
    button{ background:white}                
    button:hover{ background:blue; color:white}    
    button:active{ background:red; color:white}                
</style>

<button>Hover</button>

2) :active-

selects links for only the moment when the mouse button is pressed when clicking on the link.

<style>            
button:active{ background:blue}            
</style>

<button>Active</button>

3):visited-

selects links after the user has already clicked on them and is visiting that page again.

it selects links in their default state before the visitor has interacted with them

<style>
a:link{ color:red}                /* Unvisited Link*/
a:visited{ color:orange}          /* Visited Link*/
</style>

<a href="#">Link</a>

Matches an element if the element would match either :link or :visited.

2)pseudo-elements:

This is a keyword added to a specific part of selected elements to get some special effects

1)::first-line:

it can be used to change the font or size of the first line of a paragraph only.

Html:
<p>In publishing and graphic design, Lorem ipsum is a placeholder text . 
lorem commonly used to demonstrate the visual form of a document or
 a typeface without relying on meaningful content. Lorem ipsum may be 
used as a placeholder before final copy is available.</p>

css:
h1::first-line{
color:green;
}

output:
(In publishing and graphic design, Lorem ipsum is a placeholder text .)
changes to green color.

2)::after:

it can be used to add any content end of the paragraph or links. it is inline by default.

Html:
<p>Your order is</p>

css:
p::after{
cotent:"Delivered." ;
}

Output:
Your order is Delivered.

3)::before:

it can be used to add any content start of the paragraph or links. it is inline by default.

Html:
<p>How are you</p>

css:
p::before{
cotent:" Hey !," ;
}

Output:
Hey!,How are you
CSSWeb Design