Dark Side of CSS: Selectors
Dark Side of CSS: the Slectors
Cosa è necessario per essere un guru del webdesign? Ce lo siamo chiesti spesso. Sicuramente c'è bisogno di un buon mix di fantasia e conoscenze tecniche relative al diversi argomenti. La fantasia è qualcosa che ognuno di noi ha in modi diversi. Un programmatore per esempio non potrà raggiungere la fantasia di un designer in merito all'estetica di un auto o si un sito web. Probabilmente il primo ha iniziato a scrivere prima ancora di saper leggere (sembra una contraddizione!) e il secondo invece giocava con matite colorate, pennarelli e pennelli prima di imparare a legere e scrivere. Quindi sulla fantasia non si può intervenire molto, si tratta di un elemento che viene cresce in modo diverso nelle persone. Le conoscenze tecniche invece possono essere aumentate nel corso del tempo. Tra le conoscenze tecniche di un webdesigner ci sono i CSS. Le pagine del W3C e il web in generale è pieno di tutorial ed esempi relativi ai css, sono fondamentali per la realizzazione dei siti web e attualmente si sta aspettando l'avvento dei CSS3 i quali porteranno numerosi vantaggi per gli sviluppatori (di ciò ce ne occuperemo in un altro articolo). Ma fino a che punto è necessario conoscere i CSS? Ci sono parti meno conosciute del mondo dei CSS? Quando ci si può definire un guru dei CSS?
E' con queste domande che introduciamo l'articolo di oggi: "i Selettori CSS".
Buona lettura!
What is needed to be a guru of Webdesign? Is a question that we have very often. Surely we need a proper mix of imagination and technical knowledge related to various topics. Fantasy is something that each of us in different ways. For example, a programmer can not reach the imagination of a designer on car design or a website design. Perhaps the first began to write or do calculations before he can read (it seems a contradiction!) while the second, played with colored pencils, markers and brushes before learning to read and write. So the imagination is something that is growing in different ways in people. Technical knowledge may instead be increased over time. Among the technical knowledge of a webdesigner are the CSS. The pages of the W3C and the web in general are full of tutorials and examples of css, is crucial for the realization of websites and is currently awaiting the advent of CSS3 which will bring many benefits for developers (in future an article about the CSS3). But until that point you need to know CSS? There are dark side of the CSS world? When you can define a CSS Guru?
Is with these questions that we introduce today's article: "the CSS selectors."
Selector syntax
In the next paragragraphs we'll show you different examples with white space, ">", and "+".
We can see many selectors in one declaration
for example, this
ol, ul, li { list-style:none }
is equivalent to:
ol { list-style:none }
ul { list-style:none }
li {list-style:none }
Selectors as H1 are called Type Selector. A type selector matches the instances (all) of the element type in the document tree.
Example
img { border: 0px }
Now consider the next example:
h1 { font-style: italic; }
em { font-style: italic; }
h1 em { font-weight: bold; }
last line allow you to to apply different style only to the words in <em> tag ( <em>your phrase...</em> ) that is contained within H1.
In this case we talk about Descendant Selectors
an other example of descendant selectors it's this:
div * ul
ul element is a grandchild or later descendant of a DIV element.
Child selectors
div ul>li p
This is an example where we have Descendant selectors and Child selectors. P element that is a descendant of an LI; the LI element must be the child of an UL element; the UL element must be a descendant of a DIV.
"+" in CSS Selectors
Now see the following example
h1 + h2 { text-align: right; }
when a h2 element immediately follows a h1 element, will have the text aligned to center.
Classes and Selectors
img.news fof example, defines a particular style only for images of the class "news".
Attribute selectors
Some interesting examples of how to use the attribute selectors
We can change the style of the attribute title of a single element.
h3< class="" style="font-size: px; "> { color: #00FF00; }
In the following example, the selector matches all P elements whose "class" attribute has exactly the value "css-tutorial"
p[class=css-tutorial] { color: blue; }
besides you can use the multiple attribute selectors for several attributes of an element, or even several times for the same attribute.
img[name="css-image"][name="css-example"] { border: 2px solid #FFFFFF; }
other examples:
To choose the style of the title attribute of a link
<a href="/" title="News">Blog</a>
a< class="" style="font-size: px; "> { border-bottom : 1px dotted #999999 }...wants more?
<a href="/" title="News" >Blog</a>
a< class="" style="font-size: px; "> { border-bottom : 1px dotted #999999; }
only title attribute that contains the word 'Blog'.
Instances where 'News' comes at the beginning of the attribute
a< class="" style="font-size: px; "> { border-bottom : 1px dotted #999999; }
<a href="#" title="News from the Web">Blog</a>but, if it comes at the end of the attribute?
a< class="" style="font-size: px; "> { border-bottom : 1px dotted #999999; }<a href="#" title="Web News" >Blog</a>
and if we want to apply a particular style when titles contains the word 'News' somewhere in the attribute, we can use the following code:
<a href="/" title="Interesting News is from the Blog" >Blog</a>
a< class="" style="font-size: px; "> { border-bottom : 1px dotted #999999; }Differences between "=" and "~="
In the first example selector will match the value "prev next" for the "rel" attribute.
a[rel~="prev"]
In the second example selector will only match when the "href" attribute has the value "http://www.webair.it/".
a[href="http://www.webair.it/"]
In the next declaration we choose a bold style for the elements whose name attribute is "css-title"
*[name=css-title] { font-weight: bold; }
In this example we set "float: left" for all the elements whose name attribute starts with "box"
*[name|="box"] { float: left}
Class selectors VS ID selectors
Now we show you the difference beetwen the class selectors (first example) and the id selectors (second example)
ul.pastoral { color: green }
img#chapter1 { border: 1px dotted #333333 }
Selectors ans Pseudo-classes
In the following example, the selector matches any P element that is the first child (not second or other!) of a DIV element.
div > p:first-child { font-style: italic; }
well, if you have
<div class="news"> <p>First P of the div</p> </div>
the text into the P will have font-style: italic
but, if you have
<div class="news"> <h3>Title</h3> <p>First P of the div</p> </div>
the text into the P will not have font-style: italic
In the same way you can add other attributes
p:first-child a {
border: 0px;
outline: none;
}
When you choose the style of the links, can be useful use the selectors.
The following example show you how to use it:
a.news:visited { color: #FF0000;}
<A class="news" href="#">link</A>
you can pasto the following example in you css file to set the style of your link, but don't forget: this will apply a uniform style for all links on your page. So if you want different styles you must create new rules.
a:link { color: #FF0000; text-decoration: none; }
a:visited { color: #0000FF; text-decoration: none; }
a:hover { color: #FFFF00; text-decoration: underline;}
a:active { color: #00FFFF; text-decoration: none; }
An other use of the selectors: Pseudo-Elements
The next example shows you how to set the style of the first letter of a paragraph
.text:first-letter {
font-size: xx-large;
font-family: georgia, sans-serif;
font-style: italic;
}
<p class="text">
WebAir
</p>
The letter "W" will have the style choosen in .text:first-letter
other examples of pseudo-elements:
p:first-line { text-transform: uppercase }
and the first line of the paragraph will be in uppercase.
p.special:before {content: "WebAir "}
p.special:first-letter {color: #FFFFFF}
The W of WebAir will white
After this short article you can try experimenting with the use of CSS Selectors!