-2

Is it possible to do something similar to this in CSS:

.class1:checked + class2{
    .sidebar{
        color:blue;
    }
}

In the case of class1 being checked, look at it's sibling(class2) and change #sidebar's color to blue.

Calisto
  • 323
  • 7
  • 19

4 Answers4

2

yes, you can target a class inside of CSS statement by using SASS features. First you should Learn SASS.

Nesting feature:

SCSS Syntax:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Output:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
Mohamad Shiralizadeh
  • 8,329
  • 6
  • 58
  • 93
2

in CSS you could do something like :

.class1:checked + .class2 > .sidebar {
   color : blue
}

If the checkbox with class="class1" is checked, class="class2" his child, class="sidebar" will adept the blue color.

Here is a working Codepen

Jean-Paul
  • 380
  • 2
  • 9
  • 26
1

It worked for me this way!! Now it depends, how are you actually using your code, or how you have written your HTML.

/* by default, next text is red */

.class2 {
  color: red;
}
/* if checked, next text is green */

.class1:checked + .class2 {
  color: green;
}
#sidebar {
  color: pink;
}
/* if checked, next text is blue and its child gets below CSS */

.class1:checked + .class2 #sidebar {
  color: blue;
  border: 1px solid #f00;
  display: inline-block;
}
<label for="check">we are trying to make your code work</label>
<input type="checkbox" id="check" class="class1">
<p class="class2">If the checkbox is checked, the next link SIDEBARLINK should have border of red color for demo purpose.
  <a href="#" id="sidebar">Sidebar Link</a>
</p>
Deepak Yadav
  • 6,804
  • 5
  • 31
  • 49
  • Although we won't know until the OP posts his HTML, it is highly likely that the sidebar is a sidebar in a different location in the HTML, not underneath the element with `class2`. –  Dec 22 '15 at 13:16
  • he asked for child element, this is valid for that scenario! and if he is trying for a #sidebar element - somewhere out or on another section, then its not possible as well as his questions goes invalid – Deepak Yadav Dec 22 '15 at 13:22
  • No, he did not ask for a child element. Where do you see that? –  Dec 22 '15 at 13:42
  • check the edited history, he removed that child text. – Deepak Yadav Dec 22 '15 at 14:01
  • I cannot see what you are referring to in the edit history. –  Dec 22 '15 at 15:06
0

Assuming #sidebar is in a different part of the HTML from .class1 etc., then no, you cannot do this. CSS selectors are a sequence of element specifiers where each specifier is either below (child or descendant) or at the same level (following sibling) as the previous one, and the final one is the one targeted. You cannot randomly reach out and affect a different part of the HTML. The curly bracket notation you invented in an attempt to target the sidebar is not CSS, and although it looks a bit like SASS, which confused some of the people answering, is not SASS and no, SASS cannot magically do what CSS cannot. SASS is mere syntax sugar.