CSS Selectors That Every Developer Must Know

 

What is CSS?

    CSS - Cascading Style Sheet.

 

    CSS helps to determine or describe how HTML elements are shown on the screen.

 

    CSS also helps style HTML elements like coloring, styling, alignment, and more.

 

    We can define layout style based on a device like small, medium screen, and large screens.

What is CSS Selector?

 

    CSS Selector is used to selects the element from HTML document to style.

 

    CSS Five types of selectors are available. In this section, I discuss three CSS selectors.

 

• Universal Selectors 
• Simple Selectors
  
• Combinator Selectors 

 

1) Universal Selectors

 

    Universal Selectors is used to selects and applies the styles to all HTML elements.

 Example :

 

CSS

 

*{

    color:black

  }{codeBox}

 

2) Simple Selectors

 

    Simple Selectors means Select the HTML elements from DOM by using HTML element name, id, class. 

 

    Example :

    

HTML

 

<div id="one">Div One</div>
<div class="two">Div Two</div>{codeBox}

CSS

 

#one{

    color:red

}

 

.two{

    color:green

}{codeBox}

 

Output

Div One

Div Two{codeBox}

 

3)Combinator Selectors 

 

    Combinators tell the relation between the selectors.

 

    Combinator selectors mean to select the element depends on the relationship of the HTML elements.

 

    There are four types of Combinators.

 

• Descendant Selector
• Child Selector
• Adjacent Sibling Selector
• General Sibling Selector

    1)Descendant Selector

 

        Descendant selector denoted by space.

 

        The descendant selector selects and applies the styles to the descendants of a specified element.

 

        Let see the example selects all <p> elements inside <div> elements

       Example 

 

HTML

 

<div>
    <h5>heading 1 in the div.</h5>
    <h5>heading 2 in the div.</h5>
    <section><h5>heading 3 in the div.</h5></section>
</div>
 
<h5>heading 4. Not in a div.</h5>
<h5>heading 5. Not in a div.</h5>
{codeBox}

 

CSS

 

div h5 {
  background-color: green;
}{codeBox}

 

Output

heading 1 in the div.

heading 2 in the div.

heading 3 in the div.

heading 4. Not in a div.

heading 5. Not in a div.{codeBox}

    2)Child Selector

 

        Child Selector denoted by (>) symbol.

 

        Child Selector selects and applies the styles to the children's of the specific element.

 

        Let see the example selects all <p> elements that are children of a <div> elements.

       Example 

 

HTML

<div>
    <h5>heading 1 in the div.</h5>
    <h5>heading 2 in the div.</h5>
    <section><h5>heading 3 in the div.</h5></section>
    <h5>heading 4 in the div.</h5>
</div>
 
<h5>heading 5. Not in a div.</h5>
<h5>heading 6. Not in a div.</h5>{codeBox}

CSS

 

div > p {
  background-color: green;
}{codeBox}

Output

heading 1 in the div

heading 2 in the div

heading 3 in the div

heading 4 in the div

heading 5 Not in a div

heading 5 Not in a div{codeBox}

 

    3)Adjacent Sibling Selector

 

        Adjacent Sibling Selector is denoted by ( + ) symbol.

 

        Adjacent Sibling Selector selects and applies the styles to the nearby or closest element to the specific elements.

 

        Adjacent Sibling Selectors must have the same parent element.

 

        Let see the example selects <p> element located near to <div> elements.

 

       Example 

 

HTML

 

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. After a div.</p>
<p>Paragraph 4. After a div.</p>

<div>
  <p>Paragraph 5 in the div.</p>
  <p>Paragraph 6 in the div.</p>
</div>

<p>Paragraph 7. After a div.</p>
<p>Paragraph 8. After a div.</p>{codeBox}

CSS

 

div + p {
  background-color: green;
}{codeBox}

Output

 

Paragraph 1 in the div

Paragraph 2 in the div

Paragraph 3 After a div

Paragraph 4 After a div

Paragraph 5 in the div

Paragraph 6 in the div

Paragraph 7 After a div

Paragraph 8 After a div{codeBox}

 

    4)General Sibling Selector

 

        General Sibling Selector is denoted by the ( ~ ) symbol.

 

        General Sibling Selector selects and applies the style to all the sibling's elements next to the specific element.

 

        Let see the example selects <p> elements that are next siblings of <div> elements

       

       Example

HTML

 

<h5>Heading 1</h5>

<div>
  <h5>Heading 2</h5>
</div>

<h5>Heading 3</h5>
<p>Some code</p>
<h5>Heading 4</h5>{codeBox}

CSS

 

div ~ h5 {
  background-color: green;
}{codeBox}

Output

 

Heading 1

Heading 2

Heading 3

Some code

Heading 4{codeBox}

I think this information is helpful to you.

 

Thanks for reading - Don't Forgot To Share & Comment

Any suggestion or queries please comment, our team will response asps.

 

You may like this : 

 

         HTML API's That Every Developer Should Know

         Best Chrome Extensions for Front End Developers - Part 2

         Best Chrome Extensions for Front End Developers