0

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.

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

4
  • Y si trabajas con selectores de ID en lugar de clases? Commented el 1 abr. 2019 a las 18:39
  • Umm yo pensabe que sería posible con un after o before, pero apenas lo conozco. Por qué deberia utilizar IDs, no entiendo la diferencia.
    – América
    Commented el 1 abr. 2019 a las 19:19
  • Puedes trabajar con clases y con los selectores ID darles el formato que deseas sea único a cada conector Commented el 1 abr. 2019 a las 19:21
  • Gracias Jheyman Mejia pude lograr colocar un color de fondo en concreto gracias al ID, aún no entiendo por qué no corré con una clase.Ahora colocaré la respuesta, aunque aún no logro conseguir las líneas con "dotted" en un elemento específico.
    – América
    Commented el 1 abr. 2019 a las 19:47

1 respuesta 1

0

en base a tu código y los comentarios si se puede usar clases para pintar los hijos, te dejo el html de tu estructura y el css que tendrías que agregar al final del css que ya tienes.

.padre:hover{
  background: red !important;
}
.hijo:hover{
  background: blue !important;
}

.granhijo:hover{
  background: green !important;
}
.nieto:hover{
  background: #000 !important;
  color: white !important;
}
<div class="tree">
  <ul>
    <li>
      <a href="#" class="padre">Parent</a>
      <ul>
        <li>
          <a href="#" class="hijo">Child</a>
          <ul>
            <li>
              <a href="#" class="granhijo">Grand Child</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#" class="hijo">Child</a>
          <ul>
            <li><a href="#" class="granhijo">Grand Child</a></li>
            <li>
              <a href="#" class="granhijo">Grand Child</a>
              <ul>
                <li>
                  <a href="#" class="nieto">Great Grand Child</a>
                </li>
                <li>
                  <a href="#" class="nieto">Great Grand Child</a>
                </li>
                <li>
                  <a href="#" class="nieto">Great Grand Child</a>
                </li>
              </ul>
            </li>
            <li><a href="#" class="nieto">Grand Child</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Yo le puse cualquier color y el nombre de las clases también, pero eso es cosa de que las cambies a tu gusto.

2
  • Eso fue lo primero que intenté antes de publicar la pregunta, pero no funcionó. Ayer logré sulocionar esa parte gracias a los consejos de Jheyman Mejia y coloqué el modo en que solucioné ese embrollo en la pregunta. Ahora sólo necesito colocar los conectores especificos con CSS, pero aúnno logro consegurlo.
    – América
    Commented el 2 abr. 2019 a las 11:33
  • yo ayer estuve probando con tu código pero tampoco me resultó, si encuentro algo lo publico acá Commented el 2 abr. 2019 a las 12:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.