the web thought: selectors

Showing posts with label selectors. Show all posts

Thursday, 10 January 2013

HTML: IDs and classes

Posted by Marco Del Corno at 07:00

As I said in the last post, it's quite interesting to explore the differences between IDs and classes in CSS.

First of all, they are both selectors. But they are very different:
1) IDs are unique identifiers;
2) classes are not unique.

The above first difference is quite important because we can give a unique identifier to just one page element, while we can give a class to more than one element.

Tuesday, 7 August 2012

CSS: Less!

Posted by Marco Del Corno at 07:00

I don't know if you are already aware of LESS. If not, you will probably find it quite interesting. In fact if you're programming using CSS a lot, LESS is a powerful add on which will make things easier for you.

"LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino"

If you are intrigued by LESS and don't know about it already, please follow me...

Friday, 30 December 2011

CSS: adjacent sibling selectors

Posted by Marco Del Corno at 07:00

Who knows what adjacent sibling selectors are? Hmmm... it looks like not many of us are aware of their existence... It is quite true that considering all possible CSS selectors, adjacent sibling selectors are the most unknown and rarely used even by expert web developers. Why? Don't know... Nevertheless they are quite useful and efficient in applying CSS rules to specific elements.

I will show you an example and we will explore adjacent sibling selectors use.

What are adjacent sibling selectors?

We can define adjacent sibling selectors as stated by the W3C site:

"Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments)." (quote from W3C)

Monday, 31 October 2011

CSS: terms and syntax (a tutorial for beginners)

Posted by Marco Del Corno at 07:00

How often we couldn't understand when an article explains CSS because of its terminology? Words like "element", "class", "selector" and so on, can get mixed up in our brain, and we feel like we are missing something.

Don't worry, because here I explain it all, and so there won't be any confusion anymore.

CSS stylesheets

CSS stands for Cascading Style Sheet.
I believe you already know how a stylesheet is built. Anyway, it is important to remember that a stylesheet is a set of CSS rules. It could be external (we link to the stylesheet in the head of the page), it could be embedded directly in the head of a document or it could be inline (inside the HTML element we want to style).
When we link to an external stylesheet we use the following syntax:

<head> <link rel="stylesheet" type="text/css" href="stylesheetfilename.css" /> </head>

Wednesday, 30 March 2011

jQuery: selectors

Posted by Marco Del Corno at 07:00

If you are new to jQuery, you might be quite confused by the terms used to explain the famous library. On the other hand, if you've started to look into jQuery recently, there's one thing that is very important and that you should understand thoroughly: what are and how to use selectors.
When manipulating HTML elements in a web page, we need to be sure to select the correct element. Selectors are what you need. I know that this is the basic: without knowing what selectors are, we wouldn't be able to do almost anything with jQuery. However there are some things you might not know yet about selectors.