Change php to can select the html in css

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

You need the **child combinator** selector `>` and apply it like so: `.sidebar.sidebar-additional > ul > li {color: red;}` *Want learn more? https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors* See also: https://stackoverflow.com/questions/4459821/css-selector-what-is-it — UncaughtTypeError, Oct 17 '17 at 11:17

Taha Paksu · Accepted Answer · 2017-10-17T11:46:38.037

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

is not a good idea to use somethig like this in css ' ul li ' because there I have other ul li elements. So i need to do something to give separate names for both — Robert, Oct 17 '17 at 11:31
As you can see, I added a .container class in my previous example. You should use something like that. As I don't see your DOM right now, I can't give you the exact solution. — Taha Paksu, Oct 17 '17 at 11:32
Oh, I didn't see the recursivity there. Wait. I'll update this. — Taha Paksu, Oct 17 '17 at 11:45

score 0 · Answer 2 · answered Oct 17 '17 at 11:19

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>

DaFois · Answer 3 · 2017-10-17T11:41:49.827

0

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}

edited Oct 17 '17 at 11:41

answered Oct 17 '17 at 11:19

DaFois

2,197
8
26
43

I try like this is not work, I don't know the reason. but even like this, how I can add a class in the css to can separate the things? – Robert Oct 17 '17 at 11:22
but can you put there how will be my php with something like this? – Robert Oct 17 '17 at 11:28
your php only prints the classes you need (as I wrote), or maybe I'm not undestanding what you need... – DaFois Oct 17 '17 at 11:30
I edited my answer... you select the first level without a class and a second with the class of child ul – DaFois Oct 17 '17 at 11:35
like all elements now have the red color – Robert Oct 17 '17 at 11:40
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/156913/discussion-between-daniele-fois-and-robert). – DaFois Oct 17 '17 at 11:42

Change php to can select the html in css

3 Answers3