An important aspect in using css is to be able to select an element to apply to it the css style.
To facilitate the reading of this article, I added the index of selection methods classified as css selector, class and id, pseudo-class e pseudo-element:
Css selector:
- Selector * : select every single elements of the page
- Type selector : select directly a specific html element
- Descendant selector : select an element descendant from another
- Selector > : select the direct child and of first level fo an element
- Selector + : select an element directly adjacent to another
- Selector [atr] : select an element with a specific attribute or an attribute with a specific
.class e #id:
- .class : select an element based on a specific class name
- #id : select an element based on a specific identification name (id)
Pseudo-class:
Pseudo-element:
- :first-line : define the css style of the first line of an element
- :first-letter : define the css style of the first letter of an element
- :before and :after : define the css style of a content generated before or after an element
Css selector
1. Selector *
Selector * said universal select every single element of the page.
Example of css rule:
* {
font-style: italic;
color: red;
}
In this example, all the page fonts will be in italic and colored red.
2. Type selector
The type selector allows you to select an html element directly.
Example of css rule:
h1{
font-style: italic;
color: red;
}
In this example, all the element h1 will be in italic and colored red.
3. Descendant selector
The descendant selector select the child elements of another element
Example of css rule:
p span{
font-style: italic;
color: red;
}
In this example, all the span elements inside a paragraph will be in italic and colored red.
Example of css rule:
#myDiv a{
font-style: italic;
color: red;
}
In this example, all the links inside the div with the id name myDiv will be in italic and colored red.
4. Selector >
The selector > select the direct child of first level of an element
NB: NOT compatible with Internet Explorer 6 and inferior version
Example of css rule:
body > p{
font-style: italic;
color: red;
}
Example HTML:
<body>
<p>I am a direct child of first level of body</p>
<div>
<p>I am not a child of first level of body but a paragraph of second level</p>
</div>
</body>
In this example, only the paragraphs directly inside body will be italic and colored red.
Instead, if the paragraphs are inside another element, they are not considered as first child of first level and the css rules will not be applied to them.
5. Selector +
The selector + select an element directly adjacent to another.
Example of css rule:
div + p{
font-style: italic;
color: red;
}
Example HTML:
<div>I am an element div</div>
<p>I am a paragraph directly adjacent to the div</p>
<p>I am NOT a paragraph directly adjacent to the div</p>
In this example, only the first paragraph directly after the element div will be italic and colored red.
The css rules will not be applied to the following paragraphs.
6. Selector [attr]
Selettore [attr] select an element with a specific attribute or an attribute with a specific value.
NB: NOT compatible with Internet Explorer 6.
Example of css rules to select an element with an attribute without a specific value:
p[id]{
font-style: italic;
color: red;
}
Example HTML:
<p id="selected">I am paragraph with an id name</p>
<p>I am a paragraph without an id name</p>
In this example, all the paragraphs with an id will be in italic and colored red whatever is the id name.
The css rules will not be applied to the paragraph without an id.
Example of css rules to select an element with an attribute and a specific value:
p[class="selected"]{
font-style: italic;
color: red;
}
Example HTML:
<p class="selected">I am a paragraph with an attribute ‘class’ and the value ‘selected’</p>
<p class="other">I am a paragraph with an attribute ‘class’ but with another value then ‘selected’</p>
<p>I am a paragraph without an attribute ‘class’</p>
In this example, all the paragraphs with an attribute ‘class’ and the value ‘selected’ will be in italic and colored red.
The css rules will not be applied to the paragraphs without the attribute ‘class’ o with an attribute ‘class’ of different value of ‘selected’.
.class and #id
1. Selector .class
Select an element based on a specific class name (syntax: .className).
The class name can be applied to more elements which share the same css style.
Example of css rule:
p.myClass{
font-style: italic;
color: red;
}
Esempio HTML:
<p class="myClass">
I am a paragraph with the class name ‘myClass’
</p>
In this case, all the paragraph with the class name ‘myClass’ will be in italic and colored red.
The classes can be applied to different types of element.
Example of css rule:
.myClass{
font-style: italic;
color: red;
}
ExampleHTML:
<div class="myClass">I am a div element with the class name ‘ myClass’</div>
<p> <span class="miaClasse">I am a span element with the class name ‘myClass’</span></p>
In this example, both html elements <div> and <span> will be in italic and colored red.
NB: more classes can be applied to an element (buggy with Internet Explorer 6)
Example of css rules:
.myClass1{
font-style: italic;
}
.myClass2{
color: red;
}
Example HTML:
<p class="myClass1 myClass2">I am an element p with 2 class names</p>
2. Selector #id
The selector #id select an element with a specific and unique id name which can not be applied to other elements.
Example css rules:
#myId{
font-style: italic;
color: green;
}
Example HTML:
<p id="myId">I am a paragraph with an id name ‘myId’</p>
In this example, only the paragraph with the id name ‘myId’ will be italic and colored green.
Pseudo-class
1. :first-child and :last-child
Le pseudo-classi :first-child e :last-child select the first or last child of an element.
NB: NOT compatible with Internet Explorer 6.
:last-child NOT compatible with Internet Explorer 7 and Safari 3.0
Example to select the first child element:
#parent p:first-child{
font-style: italic;
color: red;
}
Example HTML:
<div id="parent">
<p>I am a paragraph, first child of the div element</p>
<p>I am a paragraph, second child of the div element</p>
<p>I am a paragraph, third child of the div element</p>
</div>
In this example, only the first paragraph inside the element div will be italic and colored red. The css rules will not be applied to the following paragraphs.
Example of css rules to select the last child element
#parent p:last-child{
font-style: italic;
color: red;
}
Example HTML:
<div id="parent">
<p>I am a paragraph, first child of the div element</p>
<p>I am a paragraph, second child of the div element</p>
<p>I am a paragraph, third and last child of the div element</p>
</div>
In this example, only the last paragraph inside the element div will be italic and colored red. The css rules will not be applied to the preceding paragraphs.
2. :link and :visited
I pseudo-classi :link e :visited define the css style of the links before and after being visited
Example of css rules for :link e :visited: applied to a link (element a) with a class name ‘mylink’:
a.myLink:link{
color: red;
}
a.myLink:visited{
color: green;
}
Example HTML:
<a class="myLink" href="#nogo">I am a link with a class name ‘myLink”, red before and green after being visited</a>
3. :hover and :active
The pseudo-classes :hover and :active define the css style of an element rolling over and once clicked with the mouse
NB: :active compatible with Internet Explorer only for links, html element a
:hover compatible with Internet Explorer 6 only for links, html element a
Example css rules for :hover and :active applied to a link (element a):
a:hover{
color: red;
}
a:active{
color: green;
}
Example HTML:
<a href="#nogo">I am a link, red on the hover state, green when clicked</a>
Example css rules for :hover and :active applied to a paragraph (element p):
p:hover{
background-color: #F5F5F5;
}
p:active{
background-color: black;
color: white;
}
Esempio HTML:
<p>I am a paragraph with a grey background on the over state; with a black background and white text when clicked.</p>
4. :focus
The pseudo-class :focus define the css style of a selected element in a form.
NB: NOT compatible with Internet Explorer 7 e inferior version.
Example css rule:
input:focus{
background-color: black;
color: white;
}
Example HTML:
<form action="#">
<label for="nome">Nome</label>
<input id="nome" />
<label for="email">Email</label>
<input id="email" />
</form>
In this case, the selected text field will have a black background and white text.
Pseudo element
1. :first-line
The pseudo-element :first-line define the css style of the first line of an element.
Example css rule:
#myParagraph:first-line{
font-style: italic;
color: red;
}
Example HTML:
<p id="myParagraph">The first line of this paragraph will be in italic and colored red</p>
2. :first-letter
The pseudo-element :first-letter define the css style of the first letter of an element
Example css rule:
#myParagraph:first-letter{
font-style: italic;
color: red;
font-size: 30px;
}
Example HTML:
<p id="myParagraph">The first letter of this paragraph will be in italic and colored red</p>
3. :before and :after
The pseudo-elements :after and :before define the css style of a content generated before or after an element
NB: NOT compatible with Internet Explorer 7 e inferior version.
Example css rules:
#myParagraph:before{
content: “I am the content generated before the paragraph”;
font-style: italic;
color: red;
font-size: 30px;
}
#myParagraph:after{
content: “I am the content generated after the paragraph”;
font-style: italic;
color: green;
font-size: 30px;
}
Example HTML:
<p id="myParagraph">I am a paragraph</p>
