CSS Selectors

#index
1)CSS Selector
2)CSS Selector Declaration
3)Types of Selectors
a)Universal b)Individual c)Class and Id
d)And Selector e)Combine Selector f)Inside an element selector
g)Direct Child h)Sibling.

CSS stands for (Cascade Style Sheet) CSS gives style to the web page or display the HTML content in a designed way. it will directly hit the Html elements also and shows the web page in a better way to users.

CSS Selectors plays the important role in targeting the specific element of Html to make the web page stylish and according to the user's demand.

CSS DECLARATION- In the declaration part of CSS includes two things one is SELECTORS(HTML element) and the second one is Its property and value.

p{ Color: #383CC1; background-color: #B4161B; }
/*p-selector color-property #383CC1-value of proprty*/
/*this is general declaration for CSS*/

TYPES OF SELECTORS

Universal Selector:- this selects almost all the element. if you want to use this selector then use * as a selector then all the HTML elements on the page will select.
```
<style>
/*this is a universal selector. use this to your HTML page*/
* {
  text-align: center;
  color: #1B98F5;
}
</style>
```
Individual selector:-in this type it selects a specific element of the HTML for eg-paragraph(p), headings(h), link(a),
```
<style>
/*use this to your HTML page in the head tag*/
p{
  color: #E6425E;
  border: 2px;
}
</style>
```

Class and Id selector:- selects all elements that have CLASS attributes wherever they may be and in id selects element which contains ID attributes. before using class selectors we have to use dot. (name of class) same with ID selectors also we have to use #(ID name).

<style>
.warning{
        color: #b91455;
    }
#danger{
        color: #ffffff;
        background-color: #f8f8f8;
</style>
<body>
<h1> Hey Hii hitesh and Anurag sir </h1>
<p class="warning">lorem effsdffs  sfsfsfafsa asfas asas asafasffas  aas cacaca</p>
<li id="danger">hii to all javasript bootcamp students</li>
</body>

And Selector:- this is like the option to you, for example, I want coffee & snacks this sounds both are required not single. these selectors apply to the element when the condition is satisfied. eg- "element name.class name#id name"
Combine Selector:- we can choose multiple elements using comma " , " between the elements
Inside an element selector:- here you can specifically target the inside elements of one particular element by using SPACES for example div ul li.
Direct Child:- CSS property directly added to the child. for example parent-child-grand child.
Sibling:-

1)Adjacent Sibling Selector (+):-The adjacent sibling selector is used to select an element that is directly after another specific element.

2)General Sibling Selector (~):-The general sibling selector (~) selects all elements that are the next siblings of a specified element.
All remaining types of selectors

https://codepen.io/Abhi1896/pen/dyKKyQK?editors=1100

@iwritecode @hiteshchoudhary

@ineuron

Fullstack Web Development

Fullstack Web Development

CSS Selectors

BASIC CSS SELECTORS

Table of contents

No headings in the article.