All Ways To Select In CSS

So Many Ways To Select HTML in CSS

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

as you know that there are so many things which we are missing in our CSS series but now i am going to tell about all the CSS selector which help you to select the HTML element and then style them easily so lets take a look on this one also..

All Ways To Select In CSS

CSS stands for Cascading Style Sheets and these help us to style our HTML code and make better to understand to the users and in this article i am going to take a look on the some main points of CSS so welcome back in another CSS article

Normal CSS selector

as you already as the beginner friendly CSS then there are so many ways to select a HTML element and the style them so lets take a look on that also

Select directly by Tag Name

as you know that you can easily take any HTML tag into the css to style them example HTML:

<p>Hello World</p>
<a href="codenanshu.in">Click Me</a>

CSS:

p {
color : red;
}
a {
margin : 4px;
}

Select By ID Of HTML Tag

we can also select any HTML tag by providing him a simple ID and then just use styles in the css

HTML:

<p id="first">Hello World</p>

CSS:

#first {
color : red ;
}

but there are so many another ways to do this lets take a look on that also

Combinators In CSS

yes there are Combinators are also present in the css you can use that to select the HTML dom easily lets take a look on that also

Descendant Selector

The descendant selector matches all elements that are descendants of a specified element. The following example selects all

elements inside

elements:

a p {
color : blue ;
}

Child Selector (>) in CSS

The child selector selects all elements that are the children of a specified element. The following example selects all

elements that are children of a

element:

div > a{
color : white ;
}

Adjacent Sibling Selector (+)

The adjacent sibling selector is used to select an element that is directly after another specific element. Sibling elements must have the same parent element, and "adjacent" means "immediately following". The following example selects the first

element that are placed immediately after

elements:

div + p {
  background-color: yellow;
}

General Sibling Selector (~)

The general sibling selector selects all elements that are siblings of a specified element. The following example selects all

elements that are siblings of

elements:

div ~ p {
  background-color: yellow;
}

No Comments Yet