0

I'm looking for a method or heuristic to follow in the situation where I am making small changes to CSS on sites which I haven't built myself.

Often there are multiple style sheets involved with rules overwritten at different points in the hierarchy (WordPress sites have this a lot). I often find myself struggling to make the changes I want, and also find myself sometimes using !important to make things work, which I know is not ideal.

I can right-click on an element in Chrome Dev Tools and copy the selector path to get something like #sc_team_792900095_11 > div.sc_team_item_avatar > div > div > div.sc_team_item_position

I'm wondering it this is the "standard" way to target specific elements or sets of elements? Are there any potential downsides?

I have spent hours in the past building up my selectors from the classes on the element I'm inspecting and adding the classes and ids of parent elements until I can magically affect the element/s I want. Sometimes I copy the classes from the styles pane, but find that on their own, those classes aren't enough.

Have I been doing it wrong? Do people who know what they are doing generally use the copy selector method to modify the CSS of specific elements? If not can you describe the process you use, along with the principles it is based on?

Robin Andrews
  • 3,514
  • 11
  • 43
  • 111
  • Does [this](https://stackoverflow.com/questions/22427476/how-does-chrome-dev-tools-generate-css-selectors/22704220#22704220) answer your question, or is my answer here closer to what you were looking for? (Disclaimer: I answered both questions.) – BoltClock Sep 07 '17 at 10:25

2 Answers2

0

The Copy Selector feature of browser developer tools is designed to give you a selector that is guaranteed to uniquely identify the element in the given page (only in its current state, i.e. it may not be the same between page loads). In your case, the selector you're given is just a selector that will match only the element whose great-great-grandparent element has that given ID. This is often useful in non-CSS use cases that require targeting and interacting with very specific elements.

If you're not interested in targeting just that element, but you want to target that element and others like it, you are free to modify the selector to suit your needs by removing unnecessary parts and such. For example, if all you care about is styling all .sc_team_item_position elements, you can just write a CSS rule with that lone class selector. You don't need the entire complex selector.

See also: How does Chrome dev tools generate CSS selectors?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • This sounds a bit like what I'm looking for - "get the CSS selector given by Chrome and modify it to suit your needs." Is that an approach that CSS experts would use, or is there a better way still? – Robin Andrews Sep 07 '17 at 12:21
0

That is a terrible way of targeting elements for use in your real code.

Chrome is taking selecting the element so that it is 'unique' very literally. You would typically use that to quickly target an element for use in the console (if you weren't aware of chrome's $0 feature). That selector is targeting a class element but not all elements of that class.

To style that class of elements you would only really need to use:

.sc_team_item_position {
    styles here.
 }
Felipe Warrener-Iglesias
  • 679
  • 4
  • 19
  • I've looked up $0 and I can see that it displays the last selected element in the console. Can this help to determine all the selectors I might need to target a particular element or set of elements? If so, how, please? – Robin Andrews Sep 07 '17 at 12:26
  • @Robin You're on the wrong track here... You should learn CSS if you want to know how to target elements, we target elements based on ID, Class, selector, attributes etc depending on context. It sounds to me like you don't understand CSS that well. You're not supposed to be 'getting' selectors you should be constructing them in your code based on your markup. – Felipe Warrener-Iglesias Sep 07 '17 at 12:53
  • I edited my question to give a bit more context. In most of my use cases, I have no control over the markup. I would say I'm fairly knowledgeable about CSS, although by no means an expert. I'd like to learn how an expert would approach these kinds of tasks. – Robin Andrews Sep 07 '17 at 13:20
  • Can you give some example of code and what you would want to select from it? – Felipe Warrener-Iglesias Sep 07 '17 at 13:52
  • I noticed you said do people usually use the copy selector thing for targeting elements. People don't do that, that will only give you the unique element you clicked on, which would be a nightmare for styling multiple things on a page. People don't usually use the dev tools for selecting in their code it's just for debugging in the console etc. A developer would look at the code and create a selector in their head that would target only the elements they want to target. – Felipe Warrener-Iglesias Sep 07 '17 at 13:54
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/153891/discussion-between-robin-and-felipe). – Robin Andrews Sep 07 '17 at 16:12