Css

Combinators

CSS combinators define the relationship between two selectors. CSS selectors are patterns used to select elements for styling. A CSS selector can be simple or complex, consisting of more than one selector connected using combinators. Understanding these combinators is essential for precise and efficient styling in CSS.

Descendant Selector (Space)

The descendant selector selects all elements that are descendants of a specified element. These elements can be any level deep within the specified element.

<style>

  div span h3{

    background-color: green;

  }

</style>

<div>

  <h3>Hello </h3>

  <h3>Welcome</h3>

  <h3>Hello </h3>

  <span>

    <h3>Hello </h3>

    <h3>Welcome</h3>

    <h3>Hello </h3>

  </span>

</div>

 

<h3>Hello </h3>

  <h3>Welcome</h3>

  <h3>Hello </h3>

 

 

 Child Selector (>)

The child selector selects elements that are direct children of a specified element. This combinator is stricter than the descendant selector, as it selects only the direct children.

<style>

  div > h3{

    background-color: green;

  }

</style>

<div>

  <h3>Hello </h3>

  <h3>Welcome</h3>

  <h3>Hello </h3>

  <span>

    <h3>Hello </h3>

    <h3>Welcome</h3>

    <h3>Hello </h3>

  </span>

  <h3>Hello </h3>

  <h3>Welcome</h3>

  <h3>Hello </h3>

</div>

 

<h3>Hello </h3>

  <h3>Welcome</h3>

  <h3>Hello </h3>

 

 

 Adjecent Sibling  Selector (+)

The adjacent sibling selector selects an element that is immediately next to a specified element. This selector selects only the next sibling.

<style>

  div + h3{

    background-color: green;

  }

</style>

<div>

  <h3>Hello </h3>

  <h3>Welcome</h3>

  <h3>Hello </h3>

  <span>

    <h3>Hello </h3>

    <h3>Welcome</h3>

    <h3>Hello </h3>

  </span>

  <h3>Hello </h3>

  <h3>Welcome</h3>

  <h3>Hello </h3>

</div>

 

  <h3>Hello </h3>

  <h3>Welcome</h3>

  <h3>Hello </h3>

 General Sibling  Selector (~)

The general sibling selector selects elements that follow a specified element and share the same parent. This can be useful for selecting groups of elements with the same parent.

<style>

  div ~ h3{

    background-color: green;

  }

</style>

<div>

  <h3>Hello </h3>

  <h3>Welcome</h3>

  <h3>Hello </h3>

  <span>

    <h3>Hello </h3>

    <h3>Welcome</h3>

    <h3>Hello </h3>

  </span>

  <h3>Hello </h3>

  <h3>Welcome</h3>

  <h3>Hello </h3>

</div>

  <h3>Hello </h3>

  <h3>Welcome</h3>

  <h3>Hello </h3>

  <div>

    <h3>Welcome1</h3>

  </div>

  <h3>Welcome</h3>

  <h3>Hello </h3>

 

Attribute Selector

The CSS Attribute Selector allows you to target elements based on their specific attributes or attribute values. This selector enhances the precision and efficiency of your CSS, enabling you to apply styles to elements that share common attributes. By leveraging attribute selectors, you can maintain a more organized and scalable CSS codebase. In this article, we will explore the various types of CSS Attribute Selectors, their syntax, and practical examples to demonstrate their usage.

<style>

    input[type='text']{

        height: 35px;

        width: 200px;

        display: block;

        margin-top: 10px;

    }

    input[type='submit']{

        margin-top: 10px;

        height: 35px;

        width: 200px;

        background-color: blue;

    }

</style>

<input type="text">

<input type="text">

<input type="text">

<input type="text">

<input type="submit">