User blog:TulipVorlax/CSS : How to find the proper selector to use

Work in progress, sorry.

Will be a small tut.

I repeat : The following is not finished. I'll remove that mention when it will be.

Today, someone asked me (sort of) how to know what to use to be able to modify the look of something using CSS. What to use as a selector. For me it's something so easy that every wiki admins on Wikia should know (if they really want to change the look of a wiki).

But first, let me turn back in time and tell you how this was done (or how i was doing it) in the past.

Using the page source
In the past, the only way i was using to know that sort of things was to look at the page source on the wiki. For general look you can use any normal page. But, there's also things you can style on specials pages or on the "edit mode". Here a screen capture of the source windows of IE8 (you have the same in almost all browsers) :



In the source, you have to look for "something" or  "somethingelse".

When the element you want to style use an ID, the selector will be something. If it use a class, the selector will be somethingelse.

But that way of doing is a bit tedious and doesn't always give the bests results because sometimes the CSS selector need to be more specific or it wont override specific selector that are in the default CSS on Wikia.

Using Firebug
Firebug is an extension for Firefox. And before Microsoft make an equivalent for IE8, i was using it really much. In fact, i still use it a lot. I often use both at the same time because they show differents things differently.

If you're a long time Firefox user, you surely already know how to get new extension in Firefox. For others, you must use something in the tools menu (mine is in french, i dont know what it is in english). That command make a small window show up. Click on the first tab and enter Firebug in the searchbox.

After that, you'll have a small grey bug icon at the bottom right of the browser windows. Left clicking it make Firebug show up. You can then explore the page HTML on the left and the CSS on the right. But finding specific part of a complex page like the ones we have on Wikia might be tricky that way.

So, close Firebug if it is open. Now, go to any web page. Right-click on something. A new "Inspect element" option has been added to the contextual menu. Using it on anything that compose a web page will make Firebug show up with that element already selected. You will see both it's HTML at the left and it's CSS at the right. As an example, you get something that look like in the following capture you inspect the 3D Wiki link that lie in the center of the 3D Wiki main page :



Taking a closer look at the line at the top of the HTML windows (left side), you can find how to make very or less specific CSS selectors. Also, if you hover your mouse cursor on any element, that be in the HTML or on the top line, Firefox will draw a box on them that show theirs limits and any margins if they have some.

About the specificity of selectors. If you make the following CSS rule : a { color:green; } It will affect all links on the wiki that are not also affected by a more specific rule.

If you make the following CSS rule : color:yellow; } It will affect all links that are in the inside of an article, unless there's also a more specific rule. Links in the sidebar, in the user menu and in the footer wont be affected by that one. This can be very usefull if one want to make an infobox or something that would have a dark (on wikis wich background is not already dark in wich case the infobox could have a white background or so) and change the colors of the links that are in that box.
 * 1) bodyContent a {

The outer element that compose the the infobox just need to have a specific class name. You can chose anything (except already used class names). And then you do some CSS rules like this : .myInfobox a { color:yellow; } .myInfobox a.new { color:pink; } The second rule could be needed to change the color of links that point to a non existent page in that infobox.