CODEWITHSUNDEEP
css
Konstantinos Natsios
Konstantinos Natsios

Reputation: 2924

Css with id and class

Hello and greetings to you all.

I have a strange reaction with css in one website that i'm making.

There is this code

<a class="instagram-photo image" id="p1130472628000663001_176824616" href="PROFILE" target="_blank" data-name="NAME" data-caption-std="Colors #thefeditor" data-caption="Colors #thefeditor <a target=&quot;_blank&quot; href=&quot;INSTA LINK;>View Photo</a> " data-created="1448982860" data-author="AUTHORNAME" data-likes="87" data-comments="0" data-profile="PROFILE LINK" rel="group"><img src="IMAGE LINK"><span class="journal-meta">Example Name<span>username</span></span><span class="icon">Image</span></a>

The above image is set with the following background color.

media="all"
.classic-view .instagram-photo.image {
    background-color: #3dc0f1;
}

I'm trying to change the blue color (#3dc0f1) color to this

background-color:rgba(255,215,0,0.6) !important;

With no luck because i want to change the color ONLY to this id 

id="p1130472628000663001_176824616"

because if i go to the custom css and put this css code

.instagram-photo 
{
   background-color:rgba(255,215,0,0.6) !important;
}

It changes all the images, but i want to change the images with the ID that i gave you above.

I have tried 

#p1130472628000663001_176824616.instagram-photo {
       background-color:rgba(255,215,0,0.6) !important;
    }

But it didnt work. Any idea of how can i make it work? Thanks!

P.S. the answer below is also correct but i also managed to do it with 

a[id*="_176824616"][class*="image"]
{
background-color:rgba(255,215,0,0.6) !important;
}

Thanks a lot!

Upvotes: 0

Views: 72

Answers (1)

Nick Louloudakis
Nick Louloudakis

Reputation: 6005

Why not just doing:

.instagram-photo#p1130472628000663001_176824616
{
   background-color:rgba(255,215,0,0.6) !important;
}

That way, you are declaring a rule to CSS that says that you want to set the background color to an element of class instagram-photo and with id having your id - notice that the class and id are concatenated to one phrase on the rule. This is done in order to specify the rule containing both class and id on a specific element and not the nested ones.

Also, consider that for simplicity, you could simply do:

#p1130472628000663001_176824616
{
   background-color:rgba(255,215,0,0.6) !important;
}

By "saying" to CSS you want to apply the rule only to the element(s) with the specific ID, without taking into consideration its class - this is specific on your case, so it should work fine.

In addition, consider avoiding using !important, as this can lead to unexpected behavior on your rules and violates the sequence the rules are applied.

Upvotes: 1

Related Questions