0

im using drupal to do a theme but i think this applies to any css/html using html.

im basically going into firebug and copying the CSS PATH of an item i want to stylize.. but the CSS is MASSIVELY long.. i'm not sure if this is the right way of going about things here.

here's an image to show what i mean..

screenshot of item

im just not sure how long the CSS should be. should i jsut be copying the last part of the firebug CSS?

https://i.sstatic.net/TdX32.png

Improve this question
6
  • then where do i actually copy the CSS from? Commented May 19, 2013 at 21:42
  • i all ready found the element i want to stylize as you can see in my image above.. what im doing is right clicking on the black bolded li.first and clicking copy CSS PATH, then i have that output Commented May 19, 2013 at 21:43
  • 2
    Without us knowing what the source looks like there is no way to tell you have to target it using CSS Commented May 19, 2013 at 21:44
  • check the image i posted Commented May 19, 2013 at 21:45
  • 3
    That's not how HTML / CSS works Commented May 19, 2013 at 21:47

3 Answers 3

Reset to default
1

I'm afraid that writing CSS-selectors is often a manual task, requiring knowledge of basic CSS, and that it is one of the most time consuming parts of HTML/CSS developer's work.

If we go right to your selector, very clear fact is that selector from x-path could be definitely cut to one third of its length, right before the div#block-menu... fragment. It is unnecessary to write down id's of parents when selecting target with its own id. But yet again, that optimisation requires some CSS knowledge on your side.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

thanks for your post. yes i do have pretty good CSS knowledge.. I just am not good in calling things out. I can do anything in CSS except this basically.. and I always find myself going on Google or having to try multiple things until I can finally find the element I need to select.
unless i write my own document.. in this case, its written by someone else via drupal
In Drupal, I've found that you can target more simply but just using the body class of the page then the specific class or element or even ID if, on other pages the same element is styled differently due to layout. In firebug, just click on body tag and look at all the classes you have.. so you could have, say body.section-contact p{whatever} and that will only apply to Pargraphs who are descendants of a body with .section-contact class. Just as an example.
CSS is kind of two-sided sword. It gives much freedom for naming elements, yet if one is inconsistent with naming scheme, there is hardly a way to write down CSS-selectors in an automatic way.
1

From the example you have, I would probably just use the CSS selector of:

#block-menu-menu-user-menu li { float: left; }

I don't know if the ID is created by you or drupal, but it makes writing the CSS selectors easier if the IDs and class names are shorter.

Improve this answer

1 Comment

hey, yes its written by drupal so a little out of my control.. but thank for your post
0

Firebug will take the long path to the element you need. You have this in your code :

<ul class="menu"> <li class="first leaf">...</li> <li class="last leaf">...</li> </ul>

This might solve your problem :

.menu li { float: left; }
Improve this answer

3 Comments

thanks. yes that worked.. i guess i need to get some practice on calling things out. i always get confused if i should put a space after the element, adding another . before the li, etc etc... some things have spaces others dont, etc.. just not something ive used in css before
for example... i want to call out the "first leaf" in the .menu class... how would i do that? i tried .menu li .first leaf { but it didnt work...
The best way is to change the name for "first_leaf", "firstLeaf" or whatever you want to call it but without space because it create another CSS selector. So, every "<li>" in your code have 2 CSS selector : "first"(or "last") and "leaf".

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.