CSS Selectors: Part 1, The Basics.
Tags: html, css, beginners, webdev
Published: 2023-10-02 15:41:57

## Intro:
* So you have written some Html and now you want to style it? then the best way to do that is by using CSS Selectors.
* CSS Selectors are among the first things you're going to learn while learning CSS, and in this post we are going over CSS Selectors basics.

---

### -Selector types:
* There are 4 basic CSS Selector types which are mostly used in CSS:
![selector types image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0ey1bjz7ju3t4kwrq8c.png)

However these aren't the only ones, and we will be going through most of them in the other part/s.

---

### -Universal selector (*):
* This selector selects all the elements on an html page.

```html
<p> paragraph </p>
<h2> header </h2>  
<div class="card"> --some content-- </div>
```

```css
* {
  margin: 0; 
  padding: 0;
  box-sizing: border-box;
}
```

* mostly used on top of your style sheet to add universal styles to all elements on the page, like the CSS reset for example.

---

### -Tag selector:
* This selector selects elements based on their HTML tag name.

```html
<p> selected </p>
<h2> selected </h2>  
<a> not selected  </a>
```

```css
p {
  property: value; 
}

h2 {
  property: value;
}
```

---

### -Class selector:
* This selector selects elements based on their HTML class name using ".class-name".

```html
<p class="text"> selected </p>
<h2 class="heading"> not selected </h2>  
```

```css
.text {
  property: value;
}
```

---

### -ID selector:
* This selector selects elements based on their HTML ID using "#id-name".

```html
<p id="text"> not selected </p>
<h2 id="heading"> selected </h2>  
```

```css
#header {
  property: value;
}
```

---

### -Grouping CSS Selectors:
* The previous CSS selectors can be grouped to apply common styles to more than one element using commas (,).

```html
<p> not selected </p>
<h2> selected </h2>  
<div> selected </div>
<h1> selected </h1>
```

```css
h1, h2, div {
  /* usually a common style */
  property: value;
}
```

---

### -CSS Combinators:
* CSS Combinators use the same basic CSS Selectors to target specific HTML elements based on their relation with other elements.

* Types of CSS Combinators:
![Combinators image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55vwsj8zde2iw2t9vbue.png)

--- 

### -Descendant Combinator:
* This combinator selects the children of the specified parent element.

```html
<div>
  <h1> not selected </h1>
  <p> selected </p>
  <a> not selected </a>
  <p> selected </p>
</div>
<p> not selected </p>
```

```css
div p { /* this selects all p elements inside the div */
  property: value;
}
```

---

### -Direct Child Combinator (>):
* This combinator selects the direct children of the specified parent element.

```html
<div>
  <p> selected </p>
  <a> not selected </a>
  <p> selected </p>
</div>
<div>
  <span>
    <p> not selected </p>
  </span>
</div>
<p> not selected </p>
```

```css
div > p { /* this selects direct children p elements inside the div */
  property: value;
}
```

---

### -General Sibling Combinator (~):
* This combinator selects the siblings of the specified element.

```html
<p> not selected </p>
<div>
  <p> not selected </p>
</div>
<p> selected </p>
<p> selected </p>
```

```css
div ~ p { /* this selects the siblings that come after specified element */
  property: value;
}
```

---

### -Direct Sibling Combinator (+):
* This combinator selects the direct sibling of the specified element not all siblings.

```html
<p> not selected </p>
<div>
  <p> not selected </p>
</div>
<p> selected </p>
<p> not selected </p>
```

```css
div + p { /* this selects the direct p element that comes after the specified element */
  property: value;
}
```

---

## Conclusion:

Congratulations! You've just taken your first steps into the exciting world of CSS Selectors.

In the upcoming part/s of this series, we will discuss even more selector techniques in CSS.

If you have any questions or want to share your thoughts, please don't hesitate to leave a comment below. I'd love to hear from you!

Connect with me on [LinkedIn](https://www.linkedin.com/in/mo-adel99/), reach out via Email (contact.mo.adel@gmail.com), and explore my code on [GitHub](https://github.com/mo-adel99) for more web development insights and collaboration opportunities.

Thank you for joining me on this CSS Selectors journey. Until next time, happy coding!