> For the complete documentation index, see [llms.txt](https://docs.bashschool.in/v1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bashschool.in/v1/fundamentals/css/selectors.md).

# selectors

We’ve seen the basics of selectors.

How to target a tag:

```css
p {
  color: red;
}
```

How to target multiple tags:

```css
p, a {
  color: red;
}
```

Let’s now see some more selectors.

You already know we can use the `class` and `id` attributes on an HTML element.

We can select elements with a class using this syntax: `.class {}`

Example:

```html
<p class="dog-name">Roger</p>
```

```css
.dog-name {
  color: yellow;
}
```

To select elements with a specific id, we can use this syntax: `#id {}`

Example:

```html
<p id="dog-name">Roger</p>
```

```css
#dog-name {
  color: yellow;
}
```

There is one big difference between those two selectors.

Inside an HTML document, you can repeat the same `class` value across multiple elements, but you can only use an `id` once.

Using classes you can select an element with 2 or more specific class names, something not possible using ids.

You can target an element that has 2 (or more) classes together by combining the class names separated with a dot, without spaces.

Example:

```html
<p class="dog-name roger">Roger</p>
```

```css
.dog-name.roger {
  color: yellow;
}
```

In the same way, you can combine a class and an id.

Example:

```html
<p class="dog-name" id="roger">Roger</p>
```

```css
.dog-name#roger {
  color: yellow;
}
```

You can create a more specific selector by combining multiple items to follow the document tree structure. For example, if you have a `span` tag nested inside a `p` tag, you can target that one without applying the style to a `span` tag not included in a `p` tag:

```html
<span> Hello! </span>
<p>
  My dog's name is:
  <span class="dog-name"> Roger </span>
</p>
```

```css
p span {
  color: yellow;
}
```

See how we used a space between the two tokens `p` and `span`.

This works even if the element on the right is multiple levels deep.

To make the dependency strict to **the first level**, you can use the `>` symbol between the two tokens:

```css
p > span {
  color: yellow;
}
```

In this case, if a `span` is not a first children of the `p` element, it’s not going to have the new color applied.

Direct children will have the style applied:

```html
<p>
  <span> This is yellow </span>
  <strong>
    <span> This is not yellow </span>
  </strong>
</p>
```

Adjacent sibling selectors let us style an element only if preceded by a specific element. We do so using the `+` operator:

Example:

```css
p + span {
  color: yellow;
}
```

This will assign the color yellow to all span elements preceded by a `p` element:

```html
<p>This is a paragraph</p>
<span>This is a yellow span</span>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.bashschool.in/v1/fundamentals/css/selectors.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.