Creating a custom CSS class for element with ID value

Hello,

I have a definition list on my page that looks like this:

<dl id="id_value">
<dt>text</dt>
<dd>text</dd>
</dl>

I want to make it so that any <dl> element that uses “id_value” for the “id” attribute has a left margin of 200px on large devices. I define large devices as being greater than or equal to 1200px.

Any help is appreciated.

ID’s are meant to be unique. You want to make it a class attribute instead.

Use a media rule, and wrap it around your class selector. Give it a try yourself first.

Hey there,

Thanks for the reply. We are using a CMS so I can’t actually add a class name because part of the page is locked down. My only option is to come up with CSS that specifically targets <dl> with that ID value.

I’d suggest finding a CMS that actually complies with HTML standards then :stuck_out_tongue: but the advice doesnt change really, media query, id selector.

Does this look right?

@media only screen and (min-width: 1200px) {

dl#id_value {
  margin-left: 200px;
}
  
}

I think we’re good :slight_smile:

2 Likes