CSS Selectors

CSS Selectors

All about CSS selectors

Hi everyone, today let's learn about selectors in CSS.

CSS selectors are used to select HTML elements and apply styling to them.

Let's go line by line and learn each selector in CSS

Basic Selectors

Universal Selectors

It simply says select all the elements. Example * will match all the elements in the document.

*{
  margin:0;
  padding:0;
}

The above code will apply margin 0 and padding 0 in all the elements in the document.

Type Selectors

These type selectors help you directly select HTML elements in the documents. Examples like a div, nav, section, ul tags, etc. all Html elements.

li{
  list-style:none;
}

The above will remove the dots in the list element. Try it and comment down that I have used it

Class Selectors

In HTML elements you can create a class using class="class_name" and you can select this class in CSS using .class_name

.class_name{
  display:flex;
}

Make the class element flex.

ID Selectors

Just like Class selectors, you can create an id in HTML using id = id_name . Developers also use id to apply CSS but you shouldn't use it that way because the class is there, ID is used to give a unique name to elements and identify. A perfect example would be Facebook engineers dynamically generating IDs in applications and using them. If you want you can select an Id with #id_name in css.

#id_name{
  display:flex;
}

Never use for css purposes.

Attribute Selectors

We don't use Attributes selectors much, but if you want to select elements based on the attributes (In HTML attributes are special words that you used to control element behavior) you use element_name[attribute_name= "values | it's not mandatory if you want to go more detailed element selecting"]

a[class]{
  color:#0a0a0a;
}

This will select all tags which have any class.

a[class="link"]{
  color:#2860fb;
}

This will select tags that have a class of links. If you want to go more in-depth you can this out MDN

Group Selector

Above this were all basic selectors, but what if you want to apply the same style to multiple elements. I know you don't want to repeat the so here is the grouping selectors that let you apply a style to multiple elements just using a simple comma( , ) *. It is also known as Selector List .

a,li{
  color:#2a65ff;
 }

This will select all the a and li tags and apply color to it.

Now we will move with the combinators selectors that will help you to combine two or more elements to select a nested or whichever element you want in the HTML document.

Combinators

Combinators are combining two elements to select elements (only two).

Descendant Combinator

Typically represented by a single space (" ").This combinator will help you to select all the directly or indirectly child elements. You can use more than two elements to select deep-down elements.

ul li{
  list-style:none;
  color:#555555;
}

This will select all the li elements which will have a parent of ul.

Child Combinator

This combinator use greater than sign ( > ) to select direct child of the parent element. You can use more than two elements just like the Descendant combinator.

ul > li{
  list-style:none;
  color:#555555;
}

This will strictly select li tag which has a parent of ul(not like descendant combinator).

General Sibling Combinator

This combinator use this sign ( ~ ) above tab key. It takes two selectors and select siblings (means brother and sister) to select all the below elements.

a ~ p{
  list-style:none;
  color:#555555;
}

this will select all the p elements below not in an element.

Adjacent sibling combinator

This combinator will select just the below element. You can use it like this (p + span) this will select the span tag which has the above element of p.

a + p{
  list-style:none;
  color:#555555;
}

Pseudo Selectors

Pseudo classes

Ths ( :) pseudo allows the selection of elements based on state information that is not contained in the document tree. This is an mdn documentation definition this actually means that you are selecting an element for events like hover, focus, or like first-child (these things doesn't contain in the document tree), etc. I will be listing commonly used classes.

  • :hover
  • :first-child
  • :last-child
  • :focus
  • :required
  • :disable

    comment in down if you know more imp ones.

button:hover{
  background:orange;
}

Pseudo Elements

It's a keyword added to a selector that lets you style a specific part of the selector elements. For example ::before and ::after tag.

Let's take an example where you need a dot in every div element. So you will use::before the element

div::before{
  content: "";
  display:block;
  width:4px;
  height:4px;
  border-radius:50%;
  border:none;
  background:#000000;
}

content and display are very important before keywords. If you want to read more here the Link

This is all about CSS selectors. Hope you enjoyed it. Lets learn more in the next blog.