Notice: The devs are no longer actively involved in the forum, so any bug reports regarding the Stylish extension or this website should be sent to them directly at contact@userstyles.org.
Changing your Avatar.
The only way to currently change a forum avatar is through Gravatar.com. The email address used for your Userstyles.org account must be one of the email addresses that is registered to your Gravatar account.

How Do I Target this Element in Facebook?

lionel johnlionel john
edited December 2017 in Style Development Chrome
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.
yt2.png
773 x 743 - 197K

Comments

  • stonecrusherstonecrusher
    Firefox

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

  • SonnySonny
    edited December 2017 Waterfox
    [class="_4o-f"]
  • lionel johnlionel john
    Chrome
    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 johnlionel john
    Chrome
    Sonny said:

    [class="_4o-f"]

    Would you clarify this?
  • SonnySonny
    edited December 2017 Waterfox
    Nothing to clarify. Simply another form of targeting an element. Id's can also be targeted in same manner [id="whatever"].
  • stonecrusherstonecrusher
    Firefox

    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 johnlionel john
    Chrome
    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.
  • SonnySonny
    edited December 2017 Waterfox
    If the element selector is ._4o-f then [class="_4o-f"] {color: red !important;}
  • lionel johnlionel john
    edited December 2017 Chrome
    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 johnlionel john
    edited December 2017 Chrome
    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.
  • stonecrusherstonecrusher
    Firefox

    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 johnlionel john
    Chrome
    stonecrusher said:



    My proposal was to try

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

    I tried that but still doesnt work.

  • stonecrusherstonecrusher
    edited December 2017 Firefox

    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 johnlionel john
    Chrome
    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!
  • calicocalico
    edited December 2017 Chrome 
    ._2p4n
    {color: white !important;
    }
  • lionel johnlionel john
    edited December 2017 Chrome
    calico女 said:

    ._2p4n
    {color: white !important;
    }
    Hey Calico,

    Wow! Thanks man that worked! Inspector doesnt bring this up.. How did you find this??
  • calicocalico
    Firefox
    I found it by inspecting a lower leaf on the DOM tree and then looking upward.
    image

    image
  • lionel johnlionel john
    Chrome
    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 johnlionel john
    Chrome
    bump
  • stonecrusherstonecrusher
    edited December 2017 Firefox

    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 johnlionel john
    Chrome
    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
Sign In or Register to comment.