Tag Archives: relationship

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

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;
}