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

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.

Using IE8 devs tools
IE8 is provided with it's own tool. You can add a button to the command bar to access it but you can also simply press F12 on the keyboard. There is no "inspect element" feature in the context menu but, you can see on the left, just above the HTML windows, a toolbar with a few buttons. The button that look like a mouse cursor activate the inspect element functionality. After clicking on the button, you can click on any element on page and both the left and the right windows will update their content.



About specificity
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 background (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.

Usually, i begin by using the simpliest possible selector when i try to style something. So i inspect the element that i want to style and it's direct parent. Il look in the right windows what style is already on each of them and where they get it from. Most of the time, parents elements pass on some styling to their children. If you change the font type for the body element, all others elements inside of it will herit that style, unless a more specific rule tell them otherwise.

Best rule is to be only as much specific with selectors than it's needed, no more. If per example, Wikia tech guys do a skin with a lot of highly specific CSS rules, it make things really difficult for us if we want to alter the style they made. I have many times sumble across things that i couln't change it's styling at all, no matter what i was doing. This can also be caused because some style sheet has been implemented directly into the HTML or because the load sequence of the external style sheets make our custom style sheet load before some other style sheet. Any new style override the previous style.

I will leave it to that for now. Someting has interrupted me and made me lost some idea. So, i'll ajust this from questions or others comments, if needed.

Thanks.