Change php to can select the html in css - php

Question

I have a php code that display all categories of my store, the only problem with this code is give me this structure: ul > li > ul > li. I want to be able to change in css for example the Parent Category to have the color red and Child Category to have the color blue.
I try to use something like:
.sidebar.sidebar-additional ul li:first-child {color: red;}
but is not okay, both texts Parent Category and Child Category have the same red color.
What I can do be able to select both texts separately?
function categoryLoop($id){
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$categories = $objectManager->create('Magento\Catalog\Model\Category')->load($id);
if($categories->hasChildren()){
echo '<ul>';
$subcategories = explode(',', $categories->getChildren());
foreach ($subcategories as $category) {
$subcategory = $objectManager->create('Magento\Catalog\Model\Category')->load($category);
echo '<li>';
echo $subcategory->getName();
echo "</li>";
if($subcategory->hasChildren()){ categoryLoop($category); }
}
echo "</ul>";
}
}
The html output is:
<ul>
<li>Parent Category</li>
<ul>
<li>Child Category 1</li>
<li>Child Category 2</li>
<li>Child Category 3</li>
</ul>
</li>
</ul>
Thank you

Answer 1

There are two ways to get this done:
1. CSS
Style the parent as red and the children to blue.
.container > ul > li {
color: blue;
}
.container > ul > li > ul > li {
color: red;
}
2. PHP
Output the parent with some predefined class, and children also with a different class:
<?php
$output = "";
foreach($groups as $group){
$output .= "<ul class='parent'>"; // <---- add class here
foreach($parent as $key => $category){
$children = get_children($key);
$output .= "<li>" . $category . "</li>";
if(count($children) > 0){
$output .= "<ul class='child'>"; // <---- add class here
foreach($children as $key2 => category2){
$output .= "<li>" . $category2 . "</li>";
}
$output .= "</ul>";
}
}
}
Then with CSS:
.parent {
color: blue;
}
.child {
color: red;
}
The code you provided should change like this:
function categoryLoop($id, $is_sub = false){
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$categories = $objectManager->create('Magento\Catalog\Model\Category')->load($id);
if($categories->hasChildren()){
echo '<ul' . (($is_sub) ? ' class="category_children"' : '') . '>';
$subcategories = explode(',', $categories->getChildren());
foreach ($subcategories as $category) {
$subcategory = $objectManager->create('Magento\Catalog\Model\Category')->load($category);
echo '<li>';
echo $subcategory->getName();
echo "</li>";
if($subcategory->hasChildren()){ categoryLoop($category, true); }
}
echo "</ul>";
}
}
And then:
.sidebar.sidebar-additional ul li {
color: blue;
}
.sidebar.sidebar-additional ul.category_children li {
color: red;
}

Answer 2

You can set all li to red, and then target the li you want to be blue, by specifically selecting those that are nested within two ul
ul li {
color: red;
}
ul ul li {
color: blue;
}
<ul>
<li>Parent Category
<ul>
<li>Child Category 1</li>
<li>Child Category 2</li>
<li>Child Category 3</li>
</ul>
</li>
</ul>

Answer 3

you can use the direct child selector ul > li which selects only the direct child and not the lower childs
ul > li {
/*the first level*/
}
ul > li > ul > li{
/*the second level*/
}
Alternatively:
function categoryLoop($id){
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$categories = $objectManager->create('Magento\Catalog\Model\Category')->load($id);
if($categories->hasChildren()){
echo '<ul class="second_level">';
$subcategories = explode(',', $categories->getChildren());
foreach ($subcategories as $category) {
$subcategory = $objectManager->create('Magento\Catalog\Model\Category')->load($category);
echo '<li>';
echo $subcategory->getName();
echo "</li>";
if($subcategory->hasChildren()){ categoryLoop($category); }
}
echo "</ul>";
}
}
CSS
ul > li {color: red}
ul.second_level > li {color: blue}