html

CSS Only-Child

You may have heard and tried the concept of inheritance while working in any programming language. Inheritance refers to the parent-child relationship in general. Just like another object-oriented programming, we can also make use of this concept in HTML scripting in a little different way. The CSS styling only-child offset attributes for any element can be utilized to style the only items of our HTML body that doesn’t contain any sibling element and have a parent. In other words, that single-child element can be styled according to the only-child property without modifying the rest of the elements. Within this guide, we will take a look at it.

Example 01:

We start the HTML code file within the Visual Studio Code with the HTML main opening tag followed by the opening of a head tag adjacent to the title tag opening. This title tag contains the title for this page and the title tag is closed here. Then, we have a main CSS style tag and the body tag to add elements to the HTML page along with some styling. We need to comprehend the body of the HTML first. For this, we use a simple heading of the largest size at the top of the HTML page, i.e. h1, showing that this is an example of a child-only class offset. Then, we use the simple “div” element to create a new division on the HTML webpage followed by its child tag, i.e. label. This label tag uses a simple sentence in it.

Now, the “label” element is the only tag within the “div” tag. It would be taken as an only-child offset in this case. We have another div element used after this within the HTML page. This div element contains two more tags or elements within it. Its first tag is the span tag and the other is the label tag; both contain some text data in it. Since this div tag has two children, not a single child of it would be taken as an “only-child” offset for styling. Lastly, we have a new paragraph tag with its only-child tag “label” within it. Now, this label tag of the paragraph element would also be taken as the only-child of its parent and styled accordingly. The body element is completed here.

Let’s take a guise at the design of this HTML page. Within the style CSS tag, we use the “label” element with the class offset “only-child” to apply some stylings to all the child elements of particular tags/elements that don’t contain any other child within them. In other words, the styling is applied to the child elements which don’t have any siblings. We use the property background to add the green color background for this particular child. The font-family property contains more than 1 value for the text contained by the particular child and its font size is extra large. The color for the text of “label” child tags is light pink as per the property color. The style tag beside the head tag element is completed. Let’s close the HTML tag after the body tag and save this code. Try running it with the Chrome browser to see the output for the only-child class offset.


The following output displayed shows a simple heading at the top followed by the two clear “div” sections and one paragraph. The sections displayed in the green-colored background demonstrate the only-child of the “div” section, hence styled accordingly via the only-child offset for the label element. The line after the first child element represents the second “div” section with two children, span and label, at the same line. While the second child styled in the green background is part of a paragraph element.

Example 02:

We start this HTML script with the same HTML format of codes – start with the html tag followed by the head tag, body tag, opening, and closing. The body of the HTML contains a heading of size 1, the HTML’s largest heading. We start an ordered list within our HTML body tag. This list element is added with the “ol” list tag. This ordered list contains a total of 4 numbered list items within it via the use of “li” list tags. The first numbered list contains a single unordered list within it with a single list item that is taken as its only-child. The second list item of the main ordered list contains another unordered list within it. This inner unordered list contains three list items within it with the use of the “li” tags. The third list item of the main ordered list contains a single list item within it with the inner unordered list tag followed by the “li” tag.

The last list item of the main ordered list contains another unordered list item, “ul”. This unordered list item contains a total of three list items within it using the “li” tags. The main ordered is closed after the use of all 4 main list items in it. The body of our HTML page is completed here.

Let’s take a look at the design of this whole HTML page. We use the two “li” keyword tags within the style tag to style all the inner list items of the main 4 list items. The list-style-type property for those inner list items is specified as a “circle” style. On the other hand, we use the only-child offset class for the list items to add some stylings to the only list items that are the only-child of their respective parent and don’t have any other child or sibling. We specify the text color for those child list items as red with different font-family usages. Also, we use the square list style type via the use of the “list-style-type”. The styling for this code is finalized. Let’s save and run our code to see the output.


The output for this code shows a single heading followed by the ordered list of 4 numbered list items. The single unordered list items of these ordered list items are highlighted in the red text color with the square list style bullet. The rest of the unordered list items are displayed in the circle bullet style.

Conclusion

This article has set the mark to demonstrate the use of the only-child offset class in CSS styling to style the only elements of an HTML page that are a single child of their parent element. For this purpose, we utilized a total of 2 brief examples in our HTML scripting to demonstrate the application of this offset class to such child elements. The first example contains the use of this offset to some “div” sections while the other example uses it to style the unordered list items for a numbered list.

About the author

Aqsa Yasin

I am a self-motivated information technology professional with a passion for writing. I am a technical writer and love to write for all Linux flavors and Windows.