How Do I Target this Element in Facebook?

lionel john

Hi guys,

I'm having trouble targeting a specific element in facebook. The 2 elements in grey circled in red in the screen shot are what I'm trying to change to white. So far I found "a._4o-f" which I tried changing the color but doesnt work. Whats the code for this? Thanks guys.

stonecrusher

Identifiers beginning with underscores are reserved for vendor specific purposes and must be escaped for custom use: .\_4o-f

Sonny

[class="_4o-f"]

lionel john

stonecrusher said:

Identifiers beginning with underscores are reserved for vendor specific purposes and must be escaped for custom use: .\_4o-f

So youre saying its impossible to style this element?

lionel john

Sonny said:

[class="_4o-f"]

Would you clarify this?

Sonny

Nothing to clarify. Simply another form of targeting an element. Id's can also be targeted in same manner [id="whatever"].

stonecrusher

So youre saying its impossible to style this element?

Eh? I'm even giving a solution!

Would you clarify this?

And again: Time to learn your selectors!

lionel john

Sonny said:

Nothing to clarify. Simply another form of targeting an element. Id's can also be targeted in same manner [id="whatever"].

So can I still change the element's color with this? If so how? Appreciate the follow up.

Sonny

If the element selector is ._4o-f then [class="_4o-f"] {color: red !important;}

lionel john

stonecrusher said:

So youre saying its impossible to style this element?

Eh? I'm even giving a solution!

Hi stonecrusher,

No offense but I dont understand what youre trying to say.

I did use a selector with "a" as in "a._4o-h" according to the link you provided. But that doesnt work either. This is an area of css I definitely want to learn. I'll try my best to learn.

lionel john

Sonny said:

If the element selector is ._4o-f then [class="_4o-f"] {color: red !important;}

Hi sonny,

I tried that code before the same way you entered it and it doesnt work. Hope theres another way.

Shouldn't it be: [.class="_4o-f"] rather than [class="_4o-f"] ? I think you're missing a period before "class". Either way i tried it and still no go.

stonecrusher

I'm not offended, but it's really time consuming and unnecessary to explain absolute basics here.
Please go through a CSS tutorial. I don't have a recommendation, because I never went through such a tutorial in english language and I don't recommend something that I didn't use by myself. But there are tons of them on the net. Just looking over it, I'm not a fan of the w3schools stuff.

Shouldn't it be: [.class="_4o-f"] rather than [class="_4o-f"] ?

No. The selectors reference I linked clearly says it's [attribute=value].

My proposal was to try

.\_4o-f { color: green !important; }

The a in front that limits the selection to elements with the a-tag is highly probable unnecessary, as those cryptic facebook classnames look unique.

Spot the difference:
div.blaaah selects all div that have the class "blaaah"
div .blaaah selects all elements that have the class "blaaah" and which are direct or indirect childs of a div (meaning: somewhere inside a div).

lionel john

stonecrusher said:

My proposal was to try

.\_4o-f { color: green !important; }

Hi stonecrusher,

I tried that but still doesnt work.

stonecrusher

It works.

Then your problem is somewhere else.

As the fiddle shows, the CSS specifications seem to have been updated and at least in my browser it also works without escaping the underscore by prefix with \. That wasn't the case in the past.

lionel john

stonecrusher said:

It works.

Then your problem is somewhere else.

As the fiddle shows, the CSS specifications seem to have been updated and at least in my browser it also works without escaping the underscore by prefix with \. That wasn't the case in the past.

Hey stonecrusher,

I'll investigate this. Thanks man!

calico

._2p4n
{color: white !important;
}

lionel john

calico女 said:

._2p4n
{color: white !important;
}

Hey Calico,

Wow! Thanks man that worked! Inspector doesnt bring this up.. How did you find this??

calico

I found it by inspecting a lower leaf on the DOM tree and then looking upward.

lionel john

Hi calico,

What I want to know is, why didnt you use "div._2p4n"? Or "._2pn4 ._2ieq" since thats whats shown in inspector for the entire code for that element?

Btw its hard to get the right code for some elements that hover cuz as soon as you move the mouse from the element to see what code it is in inspector, quickly after inspector vanishes. Wish there was a fix for that.

lionel john

bump

stonecrusher

div._2p4n means you target class ._2p4n AND it has to be a div
._2pn4 ._2ieq means you target class ._2ieq AND it has to be somewhere inside a class ._2pn4

as those classes are pretty unique you don't need to be too restrictive and it's ok to just target the class. Same as above.

lionel john

stonecrusher said:

div._2p4n means you target class ._2p4n AND it has to be a div

._2pn4 ._2ieq means you target class ._2ieq AND it has to be somewhere inside a class ._2pn4

as those classes are pretty unique you don't need to be too restrictive and it's ok to just target the class. Same as above.

Hey stonecrusher,

Thanks for the info. I'll try to remember this. Thanks.

Hope you can help me with a FB issue I'm having. heres my thread:
https://forum.userstyles.org/discussion/62463/facebook-pics-dont-align-correctly?new=1