How to stylize an element that is not a child of the element used in the selector

Question

How to stylize an element that is not a child of the element used in the selector

Navigation

#1 by (1 votes)

1

I have the following code, where I want to, when clicking on toogle (which is a input[type=checkbox] ), another element, which is a class of another div, below, is stylized. In the code that follows, I make an attempt using the general brother operator ~ which is not working, I think it is because the .ringDireita class is not the daughter of the div buttons, although it is "declared" beneath it.

What is wrong with using selectors or what else can be done?

body {
  margin: 5px;
  padding: 0;
  background: #262626;
}

#botoes {
  position: absolute;
  width: 100px;
  color: #fff;
  margin: 5px;
}

#botoes input[type=checkbox]::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: #000;
  transition: .1s;
  transform: scale(1.1);
  box-shadow: 0 0px 15px #ffffff;
}

#botoes input[type=checkbox] {
  position: relative;
  background: #b9b9c8;
  width: 80px;
  height: 40px;
  border: none;
  float: right;
  border-radius: 20px;
  -webkit-appearance: none;
  margin-bottom: 15%;
  outline: none;
}

#botoes input:checked[type=checkbox]::before {
  left: 40px;
}

#botoes input:checked[type=checkbox] {
  background: dodgerBlue;
}

.ringDireita {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  background: transparent;
  border: 3px solid #3c3c3c;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}

.ringDireita::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-top: 3px solid #fff000;
  border-right: 3px solid #fff000;
  border-radius: 50%;
  animation: animateCircleDireita 2s linear infinite;
}

.ringEsquerda {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  background: transparent;
  border: 3px solid #3c3c3c;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}

.ringEsquerda::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-bottom: 3px solid #fff;
  border-right: 3px solid #fff;
  border-radius: 50%;
  animation: animateCircleEsquerda 2s linear infinite;
}

.ringCentro {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  background: transparent;
  border: 3px solid #3c3c3c;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}

.ringCentro::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-bottom: 3px solid #4000ff;
  border-right: 3px solid #4000ff;
  border-radius: 50%;
  animation: animateCircleCentro 2s linear infinite;
}

span.direita {
  display: block;
  position: absolute;
  top: calc(50% - 2px);
  left: 50%;
  width: 50%;
  height: 4px;
  background: transparent;
  transform-origin: left;
  animation: animateDireita 2s linear infinite;
}

span.direita::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff000;
  top: -8px;
  right: -8px;
  box-shadow: 0 0 20px #fff000, 0 0 40px #fff000, 0 0 60px #fff000, 0 0 80px #fff000, 0 0 0 3px rgba(255, 255, 0, .3), 0 0 0 5px rgba(255, 255, 0, .1);
}

span.esquerda {
  display: block;
  position: absolute;
  top: calc(50% - 2px);
  left: 50%;
  width: 50%;
  height: 4px;
  background: transparent;
  transform-origin: left;
  animation: animateEsquerda 2s linear infinite;
}

span.esquerda::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  top: -8px;
  right: -8px;
  box-shadow: 0 0 20px #fff, 0 0 40px #fff, 0 0 60px #fff, 0 0 80px #fff, 0 0 0 3px rgba(255, 255, 255, .3), 0 0 0 5px rgba(255, 255, 255, .1);
}

span.centro {
  display: block;
  position: absolute;
  top: calc(50% - 2px);
  left: 50%;
  width: 50%;
  height: 4px;
  background: transparent;
  transform-origin: left;
  animation: animateCentro 2s linear infinite;
}

span.centro::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #4000ff;
  top: -8px;
  right: -8px;
  box-shadow: 0 0 20px #4000ff, 0 0 40px #4000ff, 0 0 60px #4000ff, 0 0 80px #4000ff, 0 0 0 3px rgba(0, 0, 255, .3), 0 0 0 5px rgba(0, 0, 255, .1);
}

@keyframes animateCircleDireita {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animateCircleEsquerda {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes animateCircleCentro {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animateDireita {
  0% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(405deg);
  }
}

@keyframes animateEsquerda {
  0% {
    transform: rotate(315deg);
  }
  100% {
    transform: rotate(-45deg);
  }
}

@keyframes animateCentro {
  0% {
    transform: rotate(135deg);
  }
  100% {
    transform: rotate(495deg);
  }
}

<html lang="pt-br">

<head>
  <title>Teste de pontos circulantes</title>
  <link rel="stylesheet" href="CSS/style.css">
</head>

<body>
  <div id="botoes">
    Hidden Rings
    <input type="checkbox"> Collision Rings
    <input type="checkbox">
  </div>
  <div class="ringDireita">
    <span class="direita"></span>
  </div>
  <div class="ringEsquerda">
    <span class="esquerda"></span>
  </div>
  <div class="ringCentro">
    <span class="centro"></span>
  </div>
</body>

</html>

operadores css3

asked by anonymous 02.10.2018 / 05:56

1 answer

Referencing elements with CSS to reposition them Highlight with bold a concatenated item

score 1 · Accepted Answer

Your thinking is correct! When you set the ~ selector to a input:checkbox that is inside a container , regardless of the state of that checkbox (checked or not), you can not reach an element that is outside that < in> container , or an element other than child or sibling of that inpud:chekbox

To resolve this issue you can use a label with the for="meuid" attribute to reach a input:chekbox:id="meuid" that is hidden away from that container . In the case I used two IDs #hide and #coli in two inputs with display:none that remain before all elements, so I can use the ~ selector to reach any element that comes after those inputs . And by clicking on label I can reach inputs and change them to checked or not.

In this example I made a Btn to hide the Rings and another Btn to hide the Balls. I left a comment in the code so you can understand better.

body
{
	margin:5px; padding:0; background:#262626;
}
#botoes
{
	position:absolute;
	width:100px;
	color:#fff;
	margin:5px;	
}
#botoes label::before
{
	content:'';
	position:absolute;
	width:40px;
	height:40px;
	top:0;
	left:0;
	border-radius:50%;
	background:#000;
	transition:.1s;
	transform:scale(1.1);
	box-shadow: 0 0px 15px #ffffff;
	
}
/* esconde os inputs com display:none */
#hide,
#coli 
{
    display: none;
}

/* aqui vc usa na verdade o label, e não o input */
#botoes label 
{	
position:relative;
background:#b9b9c8;
width:80px;	
height:40px;
border:none;
float:right;
border-radius:20px;
-webkit-appearance:none;
margin-bottom:15%;
outline:none;	
cursor: pointer;
}

/* seleciona apenas a labrl com o atributo for correpondente */
#hide:checked ~ #botoes [for="hide"]::before,
#coli:checked ~ #botoes [for="coli"]::before
{
	left:40px;
}

#hide:checked ~ #botoes [for="hide"],
#coli:checked ~ #botoes [for="coli"]
{
	background:dodgerBlue;
}


#hide:checked ~ .ringDireita::before,
#hide:checked ~ .ringEsquerda::before,
#hide:checked ~ .ringCentro::before
{
	border:3px solid transparent;
}
#coli:checked ~ .ringDireita > span,
#coli:checked ~ .ringEsquerda > span,
#coli:checked ~ .ringCentro > span
{
	opacity: 0;
}


.ringDireita
{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:150px;
	height:150px;
	background:transparent;
	border:3px solid #3c3c3c;
	border-radius:50%;
	box-shadow:0 0 20px rgba(0,0,0,.5);
}

.ringDireita::before
{
	content:'';
	position:absolute;
	top:-3px; 
	left:-3px;
	width:100%;
	height:100%;
	border:3px solid transparent;
	border-top:3px solid #fff000;
	border-right:3px solid #fff000;
	border-radius:50%;
	animation:animateCircleDireita 2s linear infinite;
}
.ringEsquerda
{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:120px;
	height:120px;
	background:transparent;
	border:3px solid #3c3c3c;
	border-radius:50%;
	box-shadow:0 0 20px rgba(0,0,0,.5);
}
.ringEsquerda::before
{
	content:'';
	position:absolute;
	top:-3px; 
	left:-3px;
	width:100%;
	height:100%;
	border:3px solid transparent;
	border-bottom:3px solid #fff;
	border-right:3px solid #fff;
	border-radius:50%;
	animation:animateCircleEsquerda 2s linear infinite;
}
.ringCentro
{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:70px;
	height:70px;
	background:transparent;
	border:3px solid #3c3c3c;
	border-radius:50%;
	box-shadow:0 0 20px rgba(0,0,0,.5);
}
.ringCentro::before
{
	content:'';
	position:absolute;
	top:-3px; 
	left:-3px;
	width:100%;
	height:100%;
	border:3px solid transparent;
	border-bottom:3px solid #4000ff;
	border-right:3px solid #4000ff;
	border-radius:50%;
	animation:animateCircleCentro 2s linear infinite;
}
span.direita
{
	display:block;
	position:absolute;
	top:calc(50% - 2px);
	left:50%;
	width:50%;
	height:4px;
	background:transparent;
	transform-origin:left;
	animation: animateDireita 2s linear infinite;
}
span.direita::before
{
	content:'';
	position:absolute;
	width:16px;
	height:16px;
	border-radius:50%;
	background:#fff000;
	top:-8px;
	right:-8px;
	box-shadow:	0 0 20px #fff000,
	0 0 40px #fff000,
	0 0 60px #fff000,
	0 0 80px #fff000,
	0 0 0 3px rgba(255,255,0,.3),
	0 0 0 5px rgba(255,255,0,.1);
}
span.esquerda
{
	display:block;
	position:absolute;
	top:calc(50% - 2px);
	left:50%;
	width:50%;
	height:4px;
	background:transparent;
	transform-origin:left;
	animation: animateEsquerda 2s linear infinite; 
	
}

span.esquerda::before
{
	content:'';
	position:absolute;
	width:16px;
	height:16px;
	border-radius:50%;
	background:#fff;
	top:-8px;
	right:-8px;
	box-shadow:	0 0 20px #fff,
	0 0 40px #fff,
	0 0 60px #fff,
	0 0 80px #fff,
	0 0 0 3px rgba(255,255,255,.3),
	0 0 0 5px rgba(255,255,255,.1);
}
span.centro
{
	display:block;
	position:absolute;
	top:calc(50% - 2px);
	left:50%;
	width:50%;
	height:4px;
	background:transparent;
	transform-origin:left;
	animation: animateCentro 2s linear infinite; 
	
}

span.centro::before
{
	content:'';
	position:absolute;
	width:16px;
	height:16px;
	border-radius:50%;
	background:#4000ff;
	top:-8px;
	right:-8px;
	box-shadow:	0 0 20px #4000ff,
	0 0 40px #4000ff,
	0 0 60px #4000ff,
	0 0 80px #4000ff,
	0 0 0 3px rgba(0,0,255,.3),
	0 0 0 5px rgba(0,0,255,.1);
}


@keyframes animateCircleDireita
{
	0%
	{
		transform:rotate(0deg);
	}
	100%
	{
		transform:rotate(360deg);
	}
}	
@keyframes animateCircleEsquerda
{
	0%
	{
		transform:rotate(360deg);
	}
	100%
	{
		transform:rotate(0deg);
	}
}	
@keyframes animateCircleCentro
{
	0%
	{
		transform:rotate(0deg);
	}
	100%
	{
		transform:rotate(360deg);
	}
}	

@keyframes animateDireita
{
	0%
	{
		transform:rotate(45deg);
	}
	100%
	{
		transform:rotate(405deg);
	}
}	
@keyframes animateEsquerda
{
	0%
	{
		transform:rotate(315deg);
	}
	100%
	{
		transform:rotate(-45deg);
	}
}	
@keyframes animateCentro
{
	0%
	{
		transform:rotate(135deg);
	}
	100%
	{
		transform:rotate(495deg);
	}
}

<!-- os inputs devem vir antes dos elementos que vc quer atingir com ~ -->
<input hidden id="hide" type="checkbox">
<input hidden id="coli" type="checkbox">

<div id="botoes">
    Hidden Rings
    <!-- agora é uma label e não o input -->
    <label for="hide"></label>
    Collision Rings
    <label for="coli"></label>
</div>

<div class="ringDireita">
    <span class="direita"></span>
</div>
<div class="ringEsquerda">
    <span class="esquerda"></span>
</div>
<div class="ringCentro">
    <span class="centro"></span>
</div>