In which scenario do we combine with ID selectors

HTML-CSS
1

Since ID selectors need to be unique, why do we ever need to combine them with other selectors? For example,

div#unique {
    font-size: 20px;
}

#unique {
    font-size: 20px;
}

Since there can be only one element with id=“unique”. Why do we ever need to use div#unique?

Thank you.

Here is a sentence from “What Is the Specificity for ID Selectors?”

ID selectors are defined by a hash symbol (# ) followed by the ID name. They should be unique within an HTML document, meaning no two elements should share the same ID.

2

I can’t think of any scenario where you would need to use an element with an id selector. You know, because they’re unique. :slight_smile:

1 Like
3

Combining the selectors like div#unique might not actually happen in a real world application.

But there are multiple ways to combine selectors. For example, it is possible to style all paragraph elements inside a div to be red.

div p
{
   color: red; 
}

The id selector might have been chosen for this example just for convenience.

1 Like
4

The course material uses this example.

div#unique {
    font-size: 20px;
}

But I couldn’t think of a scenario where I would need to use this.

5

ID selectors can be combined with other selectors to create even more specific rules.

This is another sentence from What Is the Specificity for ID Selectors?

Where do we need to be even more specific that we need to combine an ID selector?

Thank you.

6

Crazy. I think that bit should be removed from the transcript. Makes no sense to me.

1 Like
7

can you open an issue about that?

1 Like
9

Yes. I will take care of that.