CSS Selectors !

CSS stands for Cascading Style Sheet used for styling HTML documents to make them attractive and visually appealing. CSS Selectors are the selectors used for targeting an element in an HTML document. There are different types of CSS Selectors which are as follows:

1. Universal Selector (*): The universal selector is referred by * symbol. As the name says universal so whatever is written in this selector will be applied universally to the whole HTML document.

Example:

CSS

  * { margin:0; padding:0}

So the above will remove all the default margins and paddings from the web page provided by default by the browser.

2. Individual Selector: The individual selector means using HTML elements to target that particular element. For example, if you want to target

element you should use that tag name like in this case p. Below is the proper example to make you understand.

Example:

HTML

<p>This is coding</p>

CSS

p {font-size: 20px;}

So the above code will increase the font size of p elements present in the HTML document.

3. Class(.) and Id(#) Selector: The class is referred to by using (.) notation and id by (#). Classes and Ids are used to target an HTML element. The class selector is used to target multiple elements and Id selector is use to target one unique element and used only once in whole document. For example, if you give an element an id name like id-"one" them you cannot use this same id name again in your whole document that is the standard we follow whereas this is allowed in case of class. We can use multiple classes of same name in other elements.

Example:

HTML

<h1 class="home">Home Page</h1>
<p id="one">contents of home page</p>

CSS

.home { background-color: red}; 
#one {color :pink;}

4. And Selector: Also called as chained selector is used when there is situation of both the condition is true.

Example:

HTML

<p class="class1 text">Hello world</p>
<p class="class1">Hello world</p>
<p class="class1 text">Hello world</p>

CSS

p.class1.text{color: yellow;}

So the above CSS code will only color as yellow to those p element who has class as class1 and text.

5. Combined Selector: It is used to target multiple elements at the same time. If you have a use case in which you want the same styling for 2 elements then you can use a combined selector specifying the elements separated by a comma.

Example:

HTML

<h1>Hi how are you?<h1/>
<p>I am fine thank you!</p>

CSS

h1, p { color: orange;}

6. Inside and element Selector: This selector is used if we want to target an element that is not a direct child of the element.

Example:

HTML

<nav>
    <li>
        <a></a>
    </li>
</nav>

CSS

nav li a { font-style: italics;}

7. Direct child Selector: This selector is used if we want to target an element which is a direct child of parent element.

Example:

HTML

<div>
    <nav>
        <ul><li></li></ul>
    </nav>
    <h1></h1>
</div>

In the above example, div is the parent element and its direct child elements will be nav and h1 tag.

CSS

div > nav

So in the above code of CSS we are targeting nav tag as direct child of div element.

8. Sibling Selector: The sibling selector is used using the ~ or + symbol. If you want to target a sibling element. Let's understand this using an example.

Example:

HTML

<ul>
    <li>One</li>    
    <li class="sibling">Two</li>    
    <li>Three</li>
</ul>

In the above HTML code ul is the parent element and it has 3 children elements which are li elements. And because all three li elements are direct children of ul element so they are called sibling elements.

CSS

.sibling + li { color: blue;}

or

.sibling ~ li {color: blue;}

So in the above code of CSS the li element which is below the class sibling element will get a text color of blue.

CSS Elements

1. ::before: This selector is used if you want to insert content before a particular element.

Example:

HTML

<p>world</p>

CSS

p::before {content='hello '; }

The above CSS code will give the output as hello world in the browser.

2. ::after: This selector is used if you want to insert content after a particular element.

Example:

HTML

<p>good</p>

CSS

p::after{content='morning'; }

The above CSS code will give the output as good morning in the browser.