CSS

CSS Selectors

To style the HTML elements, CSS selectors are used to select or find them. There are five categories of CSS selectors:

Simple Selectors
Select the elements that are based on name, ID, and class.
Combinator Selectors
To choose elements that have a particular relationship with one another.
Pseudo-class Selectors
The pseudo-class selectors select elements with a particular state.
Pseudo-element Selectors
Pseudo-element selectors are used to select and style a part of an element.
Attribute Selectors
Select elements based on an attribute or its value.

Here is an explanation of some of the most used CSS selectors.

CSS Element Selector

The element selector finds HTML Elements by the element name.

<style>
  p {
    color: green;
    font-size: 18px;
  }
</style>
<bidy>
  <p>Learning Axis</p>
  <p>Learn HTML, CSS, & JavaScript</p>
</body>

CSS Id Selector

The id attribute is an id selector to select a particular HTML element. Every element has a unique Id, so this selector selects a unique component. Write the hash (#) character and then the id of an element to choose a particular id of an element.

<style>
  #highlight {
    color: red;
    font-weight: bold;
  }
</style>
<body>
  <p id="highlight">This is styled using an Id selector.</p>
  <p>This paragraph is not styled.</p>
</body>

CSS Class Selector

Class selectors are used to select a particular class attribute. Just write a period (.) character followed by the class name.

You can also specify that the particular class applies to only certain HTML elements. HTML elements can also indicate several classes.

<style>
  .highlight {
    color: blue;
    font-style: italic;
  }
</style>
<body>
  <p class="highlight">Styled paragraph.</p>
  <p>Unstyled paragraph.</p>
  <span class="highlight">Styled span.</span>
</body>

CSS Universal Selector

To choose all the HTML elements on the page, universal selectors (*) are used.

<style>
  * {
    color: purple;
    font-family: Arial, sans-serif;
  }
</style>
<body>
  <p>This is a paragraph.</p>
  <span>This is a span.</span>
</body>

CSS Grouping Selector

The HTML elements have exact style specifications. Group selectors compact the code more conveniently. You can separate the selectors by commas for grouping.

<style>
  p, span, div {
    color: green;
    text-align: center;
  }
</style>
<body>
  <p>This is a paragraph.</p>
  <span>This is a span.</span>
  <div>This is a div.</div>
</body>

You can style and target specific elements using the different categories of CSS selectors, which helps to create more organized, durable, and inviting layouts.

HTML

CSS

JavaScript