Tag Archives: parent

Unity 3D, Video

Organising and grouping assets in the hierarchy in Unity

This tutorial explains how to organise and group assets on the hierarchy in your 2D game as well as the parent-child relationship between assets on the hierarchy.

Next tutorial: Introduction to C# scripting and collision detection

HTML5 and CSS3, Video

Pseudo classes

Pseudo classes are used to specify a special state of a particular element. For example, the first letter in every paragraph could be a different size, or a link changes colour when the mouse cursor moves over it. Pseudo classes are built into CSS. You can’t just make your own pseudo classes. In this tutorial we will look at styling first letters and first sentences of paragraphs, how to style the first and last child of a parent, and also how to add content before and after the existing content in an element.

Watch the video below to see how to use pseudo classes in your CSS, then scroll down to see the sample code for the different examples.

The HTML code below is for the first example in the video (styling the first letter and styling the first sentence in paragraphs):

<!DOCTYPE html>
<html>
<head>
 <title>Pseudo classes</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet8.css" type="text/css"/>
</head>
<body>
 
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
</p>
 
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
</p>
 
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
</p>
 
</body>
</html>

And here is the CSS code for the first example:

p:first-letter{
 font-size:150%;
 font-weight:bold;
 color:red;
}
 
p:first-line{
 color:blue;
}

This is the HTML code for the second example (styling first child and last child, and styling before and after):

<!DOCTYPE html>
<html>
<head>
 <title>More pseudo classes</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet9.css" type="text/css"/>
</head>
<body>
<p>This is a paragraph</p>
<div id="parent">
 <p>The quick brown fox jumped over the lazy dog.</p>
 <p>The quick brown fox jumped over the lazy dog.</p>
 <p>The quick brown fox jumped over the lazy dog.</p>
 <p>The quick brown fox jumped over the lazy dog.</p>
</div>
</body>
</html>

And here is the CSS code for the second example:

#parent p:first-child{
 color:green;
 text-decoration:underline;
 font-weight:bold;
}
 
#parent p:last-child{
 color:red;
 text-decoration:none;
 font-style:italic;
}
 
#parent p:before{
 content:"-->";
}
 
#parent p:after{
 content:"<--";
}

 

HTML5 and CSS3, Video

Child selectors

In this tutorial we will have a look at the parent/child relationship in CSS. All elements in an HTML document can be both parents and children, except for the body which can only be a parent. A div can be a child of the body or another div. A paragraph, heading, or other element can also be a child of the body or another div.

For example, if you place a <h1> heading inside a div, then the div is the heading’s parent and the body would be the div’s parent. This is called the parent/child relationship in CSS. We can use child selectors in CSS to apply styles to elements that are a child of another element such as a div or table. The image below illustrates the parent/child relationship in CSS.

The parent/child relationship in CSS.
The parent/child relationship in CSS.

The video below shows how to use child selectors in CSS to apply styles to child elements in an HTML web page. Watch the video below and then scroll down to see the HTML and CSS code.

Here’s the HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Child selectors</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet7.css" type="text/css"/>
</head>
<body>
<div>
 <p>This paragraph has a parent div.</p>
</div>
<p>This paragraph does not have a div as a parent.</p>
<div id="myparagraph">
 <p>This paragraph is a child of another div.</p>
</div>
<p>This is another paragraph without a parent div.</p>
</body>
</html>

And here’s the CSS code:

p{
 color:blue;
}
 
div p{
 color:red;
}
 
#myparagraph p{
 color:green;
}