CSS Selectors and It's Types

CSS3 selectors are patterns used to select and apply styles to specific HTML elements. They allow you to target specific elements based on their type, class, id, attribute, and more.

Here are some common CSS3 selectors and how to write them:

Element Selector: Selects all elements of the specified type and applies the styles to them. For example, to apply styles to all <p> elements, you would write:
```
/* select by tag name. for tag name you have to write tag name.*/
p{  
    font-family: 'Courier New', Courier, monospace;
    color: blue;
}
```
Class Selector: Selects all elements with the specified class and applies the styles to them. For example, to apply styles to all elements with a class of .highlight, you would write:
```
/* select by class name. for class name you have to use '.' before class name. */
.highlight {
    font-family: 'Courier New', Courier, monospace;
    background-color: lightblue;
}
```
ID Selector: Selects the unique element with the specified id and applies the styles to it. For example, to apply styles to an element with an id of #header, you would write:
```
/* select by id. selecting by id you have to use '#' before id name.  */
#header{
    font-family: 'Courier New', Courier, monospace;
    border: 2px solid red;
}
```

Attribute Selector: Selects elements with the specified attribute and applies the styles to them. For example, to apply styles to all elements with a src attribute, you would write:

/* for all tag which have 'src' attribute  */
[src] {
  border: 2px solid green;
}
/* for all input tag which have 'type' attribute is 'text' */
input[type="text"] {
  padding: 10px;
}

Pseudo-class Selector: Selects elements based on their state, such as :hover, :active, :focus, etc. For example, to apply styles to an element when it's being hovered over, you would write:
```
a:hover {
   color: green;
}
```
There are several types of pseudo-selectors in CSS3, and they allow you to select elements based on their state or position in the document. Here are some of the most commonly used pseudo-selectors:
1. :hover: Selects an element when the user hovers over it with the mouse.
2. :active: Selects an element when it is being activated, such as when a button is being clicked.
3. :focus: Selects an element when it has focus, such as when a text field is selected.
4. :visited: Selects a visited link.
5. :first-child: Selects the first child element of its parent.
6. :last-child: Selects the last child element of its parent.
7. :nth-child(n): Selects the nth child element of its parent.
8. :not(selector): Selects elements that do not match the specified selector.
9. :target: Selects the target element of a URL fragment identifier.
10. :enabled: Selects form elements that are enabled.
11. :disabled: Selects form elements that are disabled.
12. :checked: Selects form elements that are checked (such as radio buttons and checkboxes).
These pseudo-selectors can be combined with other selectors to target specific elements in a more precise manner. For example, you can target the first child of a specific element type by combining :first-child with an element selector, like this:
```
ul li:first-child {
  background: red;
}
```
Combination Selectors: Select elements based on their relationships to other elements. For example, to apply styles to all <span> elements inside <p> elements, you would write:
```
p span {
   color: darkred;
}
```
Universal Selector: Selects all elements on a page and applies the styles to them. For example, If you want to remove default margin or padding for all tags. Just copy this css code and ready to go.
```
*{
    margin: 0px;
    padding: 0px;
}
```
The ::before and ::after pseudo-elements in CSS3 allow you to insert content before or after an element. This can be useful for adding specific content, such as an icon or a separator, to an element without having to add additional HTML elements.

Here's an example of how to use the ::before pseudo-element to insert a font-awesome icon before an element:
```
<style>
  .icon::before {
    content: "005";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: inline-block;
    margin-right: 10px;
  }
</style>

<p class="icon">Example text</p>
```
And here's an example of how to use the ::after pseudo-element to insert a line break after an element:
```
<style>
  h1::after {
    content: "";
    display: block;
    height: 1px;
    background-color: #ccc;
    width: 100%;
    margin-top: 20px;
  }
</style>

<h1>Example Headline</h1>
```
In both examples, the content property specifies the content to be inserted, while the rest of the styles define the appearance of the inserted content. The ::before and ::after pseudo-elements are inserted as anonymous inline boxes, so it's important to set their display property appropriately to control their placement in the layout.

Call us for websites development:

+918340460297

CSS Selectors and It's Types