Css Course


Pseudo-classes allow adding CSS rules to certain parts of the same selector.
For example, when you define a style for a HTML tag or a particular class, the content of all those tags or class will have the same style. If you want to define a different style for the first (or last) element of those tags or for the first content of a group of elements with the same class, you can accomplish this by using pseudo-classes.
Also, they can change the graphic style of items when the mouse is acting on them.


- Syntax:
selector:pseudo-class { property: value; }
Or, used with class:
selector.class:pseudo-class { property: value; }

List with Pseudo-classes


To understand CSS pseudo-classes, how they work and what is their effect, study the following examples.


Pseudo-classes with type selector

Type selectors refer to HTML tags which they define (eg.: p for <p>, li for <li>, div for <div>, etc.).
In the following example is used first-child with paragraphs.

<style>
p:first-child {
color:blue;
}
</style>

<h4>Example first-child</h4>
<blockquote>Apply css style to first P tag.</blockquote>

<div>
<p>A text within the first paragraph</p>
<p>Content in the second paragraph</p>
<p>Text content in the third paragraph</p>
</div>
• Other example, with the hover value applied to <li> tags.
<style>
li:hover {
background-color:#88fe88;
}
</style>

<h4>Example hover</h4>
<p>When you place the mouse over each LI, it will have a green background.</p>

<ul>
 <li>Free courses and tutorials</li>
 <li>Web site: https://coursesweb.net</li>
 <li>Web site: marplo.net</li>
</ul>

Pseudo-classes with class

Pseudo-classes are not the same with classes. The classes refer to the value of a class attribute, in stylesheets are added after a (.) character.
- In the next example are used lang and last-child applied to a class '.test':
<style>
.test:last-child {
background-color:#88fe88;
}
.test:lang(en) {
color:blue;
}
</style>

<h4>Example lang and last-child</h4>
<p>The CSS style defined for <b>test: last-child</b> will be applied to the last LI that has class 'test'.<br>
The CSS rule added to <b>.test:lang(en)</b> is applied only to the element that has both: <em>class='test'</em> and <em>lang='en'</em> attributes.</p>

<ul>
 <li class='test'>HTML: https://coursesweb.net/html</li>
 <li class='test' lang='en'>CSS: https://coursesweb.net/css</li>
 <li class='test'>JavaScript: https://coursesweb.net/javascript</li>
</ul>
• Here is other example, where are combined a class (test), a type selector <em> tag and 'first-child'.
<style>
/* Applies to the first EM tag of every element with class='test' */
.test em:first-child {
font-weight: bold;
color: blue;
}
</style>

<p>A CSS style will be applied to first EM tag of every 'test' class.</p>

<p class='test'>Paragraph with three EM tags: <em>blue text</em>, a <em>second EM tag</em>, and another <em>em text</em>.</p>
<p class='test'>Another paragraph: <em>a bold-italic blue string</em>, and a second <em>em sub-string</em>.</p>

Pseudo-classes with ID and form elements

In the fallowing example is used the hover pseudo-class applied to an ID, and the focus pseudo-class to a class (test).
<style>
#idb:hover {
background-color:#12da34;
}
.test:focus {
background-color:#dadafe;
}
</style>

<h4>Example hover and focus</h4>
<p>When the mouse is over the button it changes its background color.<br>
When you click on the text areas of the form it changes their background color.</p>

<form action='' method='post'>
 <input type='text' class='test' /><br />
 <textarea cols='20' rows='5' class='test'></textarea><br />
 <input type='button' value='Button' id='idb' />
</form>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Click on the "echo" correct instruction.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Address URL: http://CoursesWeb.net";
Pseudo-classes

Last accessed pages

  1. Writing PHP scripts (10742)
  2. Convert BBCode to HTML and HTML to BBCode with JavaScript (7566)
  3. Make HTML elements the same height (1059)
  4. PHP MySQL - WHERE and LIKE (26704)
  5. Highlight Images on click (5415)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (713)
  2. PHP Unzipper - Extract Zip, Rar Archives (709)
  3. SHA256 Encrypt hash in JavaScript (614)
  4. Read Excel file data in PHP - PhpExcelReader (528)
  5. SHA1 Encrypt data in JavaScript (436)