title: ReactJS + styled components + pseudoClasses
body: <p>Is it possible to use pseudoclasses for styling components. I have checkbox which should display SVG image:  checked/ unechecked for displaying state as selected/unselected. I can do this with passing props from parent. But i have been told it is possible by only css(styled components). 
  part of my code:</p>
  
  <pre><code> const CheckboxInput = styled.input`
    &amp;:checked, &amp;:not(:checked) {
    display: none;
   }`;
  
  const CheckboxLabel = styled.label`
    cursor: pointer;
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
  `;
  
  function Checkbox(props) {
    return (
      &lt;CheckboxLabel htmlFor="id" onChange={() =&gt; { props.onchange(); }}&gt;
        &lt;CheckboxInput id="id" type="checkbox" checked={props.checked} value="cb" name="cb" /&gt;
        &lt;Span&gt;&lt;SVG glyph={checked} width={17} height={17} /&gt;&lt;/Span&gt;
        &lt;Span&gt;&lt;SVG glyph={unchecked} width={17} height={17} /&gt;&lt;/Span&gt;
        {props.children}
      &lt;/CheckboxLabel&gt;
    );
  }
  </code></pre>