Home / Questions / 443330
Accepted
Daniel Briceño
Asked: 2022-04-11 15:14:35 +0800 CST 2022-04-11 15:14:35 +0800 CST

How to change the style of an element within another, using pseudo-elements to know its state?

  • 772

My idea is simple: Identify the state of one element and change the style of another element accordingly:

I try this and the div element inside the threedot div doesn't change and stays invisible. How do I make this work?

/* El css: */
#trespuntos b:hover {
  display: none;
  #trespuntos div {
    display: block;
  }
}

#trespuntos b {
  font-size: 3em;
}

#trespuntos div {
  display: none;
}
<!-- El HTML: -->
<div id="trespuntos">Descripción:<b>...</b>
  <div>
    <h3>Beneficios:</h3>
    <ul>......</ul>
    <h3>Ploblemas:</h3>
    <ul>.......</ul>
  </div>
</div>

html

1 Answers

  1. Best Answer

    It is not syntactically correct to nest selectors in CSS, as it can be done in supersets like LESS, SASS , Stylus and SCSS. Every cascading relationship (the C in css) is expressed outside of curly braces.

    If the expression you put were admissible, it would still be pointing to"un <div id='trespuntos'> dentro de un elemento <b> dentro de un <div id='trespuntos'>"

    What you want to do can be done by styling the sequence: cuando se produzca un elemento X seguido de un elemento Y, dale este estilo

    #trespuntos b{font-size:1.5em;}
#trespuntos div{display:none;}

#trespuntos b:hover+div{display:block;}
    <div id="trespuntos">Descripción:<b> pon el mouse aquí!</b>
  <div>
     <h3>Beneficios:</h3>
      <ul>......</ul>
      <h3>Ploblemas:</h3>
      <ul>.......</ul>
   </div>
</div>

    Although style sheets generally operate from parent to child, this is an example of styles that apply between siblings.

    • 2