How do I copy the correct selector path?

edited March 2014 in Style Development
I use chrome, and trying to make a theme for Facebook.
I am very unsure most of times of what selector is the correct one.
However, I find the text clear that shows beneath the element, problem is I can't copy this selector code?
It's not the exact same name in the HTML code, it's different and I have often needing to add li. or ul. for example in front of it, and # and the dots.

As shown in the image (I link image in end of this text), the selector is showing right beneath the text input field.
It also do shows on very bottom of the printscreen, but I can't really copy that, I tried right click but nothing ain't coming up.

I just wonder if there's a quick way to copy this code somehow? or do I have to quite write it down all by myself, copy the HTML code and quite put it all together?

Thanks in advance

Print screen:
http://prntscr.com/33f0jq

Comments

  • I just wonder if there's a quick way to copy this code somehow?
    Right-click and select 'Copy CSS path'?
    515 x 426 - 30K
  • Ooooh, I didn't know.
    Thanks.

    Though I really can't even find the correct selector for writing comments on other posts.. It's very different, the copy CSS path and the selector to the right of the inspector element.
  • edited March 2014
    Also, it seems like it doesn't copy that path I were saying.
    You see, here's the path:
    http://prntscr.com/33g5cu

    When I hold it over you see the path there, whatever that path now is?

    When I right click and clicking on copy CSS path, it copies this:
    #js_11

    And to the right it says:
    ._5vsj .UFIAddComment .ReactLegacyMentionsInput .UFIAddCommentInput.DOMControl_placeholder

    And I been trying this code and other codes above, but really can't find it.

    How can I tell what selector it is?!? I wanna change the background of where you are typing text.




    [edit]
    And, at the example you gave, it didn't give that path?
    It gave me this:

    #u_0_2y


    and that one doesn't even work.

    [EDIT]
    Oh, my fault, my code above didn't have closing bracket, lol.
    Well, still I don't understand what selector to use in what time, there's different one working :S
  • edited March 2014
    Looks like the id value is generated differently. Use class attribute instead.
    1. Double-click or right-click and select 'Edit attribute' on class value
    2. Copy the value and paste it into Stylish editor
    3. Replace all spaces with dots
      .uiTextareaAutogrow.input.autofocus.mentionsTextarea.textInput
      or use attribute selector
      [class="uiTextareaAutogrow input autofocus mentionsTextarea textInput"]
  • Ok but sometimes it even need include the UL. or LI. or A.
    So distrubing that IT SHOWS the selector BUT I CAN'T COPY IT. Aren't there any extension for chrome so I can copy it?
  • edited March 2014
    It copies ok for me, unless I misunderstand you. Seems like I remember I used to have to double-click to make the selector editable, but now just left-click to make editable and right-click->Copy, or Ctrl-C, to copy.

    Edit: (off-topic) I just noticed the ::after pseudo-element is now shown in the left pane so can be inspected the same as a real element, finally. Awesome!

    Edit: (back on topic) I forgot to read the previous comments. If you need to copy something in the left pane, you can double-click an attribute (like class="_5vsj UFIAddComment ReactLegacyMentionsInput UFIAddCommentInput DOMControl_placeholder") to make it editable (can copy or change). But for a selector, it's usually more useful to find the rule/declaration that you want to change in the right pane, and use the same or similar selector for your rule to override it.

    With Firefox DOMi you can right-click the element and choose from various selectors to copy, so that point goes to Firefox.
    1191 x 610 - 145K
  • Well, on your screenshot, that's not what I mean.

    I mean when you hover over in the HTML code (elements) it shows what element it is on the page, and it also shows the selector.

    Screenshot: http://prntscr.com/35f0wb

    In this case, on the "Write comment", the correct selector shall be:
    a.WriteButton.TabLink

    Right? On the right side where I see in the tab "Styles", I see this selector:
    .Active .TabLink

    But, I believe this selector are used by possible other elements on the page, and therefor I would rather use the a.WriteButton.TabLink selector.

    Now, I cannot try this out due issue with the extension, but I believe this selector that shows up shall be the correct one, of what I learned so far though.


    And it's this a.WriteButton.TabLink I would like to be easy copied.

    I might as well move to Firefox, however, I find the source code editor one very hard comparing to Chrome. But I might just give it some time and see if it's better there.
  • What that tooltip is showing you is the ids and classes of that element. That combination can be used as a selector, but it is not "the selector", and a.WriteButton.TabLink is not any more "correct" than .Active .TabLink. I agree it would be nice to be able to copy it.

    http://www.w3schools.com/cssref/css_selectors.asp
Sign In or Register to comment.