How do I copy the correct selector path?
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
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
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.
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
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?
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.
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.
http://www.w3schools.com/cssref/css_selectors.asp