Skip to main content
Logré solucionar sólo un error de 2 en el código expuesto
Origen Enlace

Editado

Ahora pude solucionar el problema para rellenar con un color de fondo un elemento en particular. Sólo añadí el div de esta manera:

                            <div class="exp">
                              <a href="#">Secretaria <br/>de Dirección</a>
                              <ul>
                                <li><a href="#">Oficina de <br/>Partes</a></li>
                              </ul>
                        </div>

Y el CSS de esa clase es la siguiente:

.exp a {
font-size: 20px;
background-color: blue;

}

PD: Aún no logro conseguir un CSS para los conectores, cualquier sugerencia es agradecida

Editado

Ahora pude solucionar el problema para rellenar con un color de fondo un elemento en particular. Sólo añadí el div de esta manera:

                            <div class="exp">
                              <a href="#">Secretaria <br/>de Dirección</a>
                              <ul>
                                <li><a href="#">Oficina de <br/>Partes</a></li>
                              </ul>
                        </div>

Y el CSS de esa clase es la siguiente:

.exp a {
font-size: 20px;
background-color: blue;

}

PD: Aún no logro conseguir un CSS para los conectores, cualquier sugerencia es agradecida

Origen Enlace

Agregar CSS a un conector específico de un diagrama

He intendado muchas veces agregar un CSS a una línea o conector específico para el siguiente diagrama hecho en HTML:

* {margin: 0; padding: 0;}

.tree ul {
    padding-top: 20px; position: relative;
    
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.tree li {
    float: left; text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
    
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
    content: '';
    position: absolute; top: 0; right: 50%;
    border-top: 1px solid #ccc;
    width: 50%; height: 20px;
}
.tree li::after{
    right: auto; left: 50%;
    border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
    display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
    border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
    border-right: 1px solid #ccc;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
    content: '';
    position: absolute; top: 0; left: 50%;
    border-left: 1px solid #ccc;
    width: 0; height: 20px;
}

.tree li a{
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    display: inline-block;
    
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
    background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
    border-color:  #94a0b4;
}
<div class="tree">
    <ul>
        <li>
            <a href="#">Parent</a>
            <ul>
                <li>
                    <a href="#">Child</a>
                    <ul>
                        <li>
                            <a href="#">Grand Child</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Child</a>
                    <ul>
                        <li><a href="#">Grand Child</a></li>
                        <li>
                            <a href="#">Grand Child</a>
                            <ul>
                                <li>
                                    <a href="#">Great Grand Child</a>
                                </li>
                                <li>
                                    <a href="#">Great Grand Child</a>
                                </li>
                                <li>
                                    <a href="#">Great Grand Child</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Grand Child</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

En otras palabras, lo que busco es poner una línea con puntos (dotted en CSS) a un conector en concreto. Además no he podido a cabalidad el colocar un color de fondo a un elemento específico. Por ejemplo si coloco el CSS directo en el código se ve bien:

<li><a href="#" style="font-size: medium !important; background-color: #000081; color: #fff !important; width: 200px;">Parent</a>...

Pero si llamo a una clase con el mismo CSS, no pueden verse los estilos:

.parent {
    font-size: medium !important;
    background-color: #000081;
    color: #fff !important;
    width: 200px;
}
<li><a href="#" class="parent">Parent</a>...

Gracias por las sugerencias.