How do I choose a type of selector (regular . #)

What is the difference between .selector, #selector and selector? I'm always guessing at which one to use.

Q: What is the difference between .selector, #selector and selector? I'm always guessing at which one to use.


A: selector is called a Type selector. These generally refer to site-wide HTML elements like <a …>…</a>, <body>…</body>, <h1>…</h1>, <h2>…</h2>, <table>…</table>, (<div>…</div>), etc.

note !

Since the wikidot-editor is no HTML-editor and a css-declaration is build out of html-selectors, you need to know the conversion of wiki-syntax to html-syntax. Therefore a list is provided at [somewhere]

If you use just the selector name in your CSS, ALL the containers of type selector will have the settings as described there. For simple sites this works great. However if you want to specify something for one (lets say) <H2> element, and you do not want it to affect other <H2> elements, you can create a class selector (.selector) and apply it to just a single <H2> element if you like.

.selector is called a Class selector. These are used to apply the class to a specific general used element. Imagine a page that you build up using a <table> element. (If you really are interested in CSS, you should try to stop doing this). You can imagine that there could be a table on that page to show some data. Well you want to show the data table, but not the layout table… to do this you can apply a class selector to your table. Here is some Wikidot syntax to demonstrate:

[[table class="datatable"]]
   [[row]]
     [[cell]]data[[/cell]]
   [[/row]]
[[/table]]

If you add the class selector .datatable { … } to your custom CSS, your can apply the styles by using the syntax in the sample code above.
NOTE : Since it is a table, it will inherit all the settings of the table{}-selector… so if you want other value's you should add them to your datatable{}-selector to overwrite the general value's of the table{}-selector. For an example have a look @ CSS test on table

#selector is called an ID selector. These are used to apply styles and are commonly used with javascript behaviors on containers that are given an id attribute like <input id="name"> and on <div id="name"> containers. In terms of editing these selectors for use with Wikidot's CSS, you will primarily be editing IDs related to the HTML <div>…</div> blocks that make up Wikidot pages.

Here's some specific examples from some Wikidot HTML sources and corresponding CSS:

HTML Source Selectors Related CSS
<blockquote>
<p>Could you take a second to review <a href="http://blog.wikidot.com/design:2">http://blog.wikidot.com/design:2</a> and make sure it gives you what you need? Thanks.</p>
</blockquote>		 blockquote, p, a 
blockquote{
    border: 1px dashed #999;
    padding: 0 1em;
    background-color: #f4f4f4;
}
a{
    color: #00A;
}
p{
    font-family: verdana,arial,helvetica,sans-serif;
}
<div class="gallery-box"> .gallery-box 
.gallery-box{
    overflow: hidden;
    width: 98%;
}
<div id="side-bar"> #side-bar 
#side-bar{
    float: left;
    width: 14em;
    padding: 1em;
    margin: 0 0 1em 0;
    clear: left;
}

If you found this info useful rate it up and hit "+"

rating: +1+x




This is not a <HTML>-CSS reference base. For that we direct you to other excellent places on the web: CSS-tutorials via Google

Thanks for the input to


Add a New Comment
_solvedselectors
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License