Css3 :Unchecked Pseudo-Class

Select all radio buttons not checked

This should do the trick, as there is no such thing called unchecked in css3 yet. As far as I'm aware.

input[type="radio"]:not(:checked) {
    /* styles */
}

CSS3 :empty pseudo class

The Chrome bug apparently only happens with the display property, so you can instead set visibility: hidden; to make it invisible and position: absolute; to prevent the space from being reserved. This doesn't require the use of :not(:empty).

As always, whenever you find yourself pushing browsers to their limits, stop and ask yourself if there's a simpler way to do the job. Depending on what you need, simple calls to jQuery's show() and hide() method could work just as well. :)

UI element states pseudo-class (:checked) property remains although checkbox already unchecked in mobile environment

I think here is the problem.

label:hover{
    background-color:rgba(0,0,0,0.2);
}

change this styling for mobile

@media (max-width: 576px) {
 label:hover{
    background-color: transparent;
}
}

the background is changing in mobile even when it is hovering because the styles of hovering are still applying it even when you uncheck the input. unchecking the input still means hover in mobile.

here is the working demo.

input{

    z-index: -1;

    display: none;

}

div{

    margin: 10px auto;

    width: 200px;

    height: 100px;

    background-color: aquamarine;

    cursor: pointer;

}

label{

    margin: 0;

    padding: 0;

    

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    background-color: transparent;

    color: white;

    

    font-weight: bold;

    cursor: pointer;

}

.check{

    display: none;

    text-align: center;

}

.uncheck{

    display: block;

    text-align: center;

}

label:hover{

    background-color:rgba(0,0,0,0.2);

}

@media screen and (max-width: 576px) {

   label:hover{

      background-color: transparent;

  }

}

input:checked + div label{

    background-color:rgba(0,0,0,0.2);

}

input:checked ~ .check{

    display: block;

}

input:checked ~ .uncheck{

    display: none;

}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<body = ontouchstart="">

  <input type = "checkbox" id = "clicked">

  <div>

      <label for = "clicked">

          Hello World

      </label>

  </div>

  <span class ="check">Checked!!</span>

  <span class ="uncheck">UnChecked</span>

</body>

CSS3 :not negation pseudo-class not fully supported by Firefox?

In CSS the comma (,) separates selectors. It's not a selector itself so it can't be used inside a selector. So depending of if you want to apply the rule to

paragraphs that are not .class1 and paragraphs that are not .class2,
paragraphs that have neither .class1 nor class2 or
~~paragraphs that don't have .class1 and .class2~~

it's

p:not(.class1), p:not(.class2) {
}

p:not(.class1):not(.class2) {
}

p:not(.class1.class2) {
}

BTW, IMHO it's better to avoid :not if possible and in this case, for example, have a general rule that applies to all ps (with the properties you want to set in the :notrule) and one that applies to ones with the class and overrides the properties of the first rule if necessary.

SCSS: pseudo-class :first-of-type affects all types

Your first attempt picked up every strong element since they were all the first children of their respective parent elements.

I couldn't at first glance see anything wrong with your second attempt, where you had selected the strong element that was a child of the first .cell element. However, we haven't seen the full code so maybe there is something wrong in that?

I 'translated' the SCSS to CSS to check and this is the result I saw:
Sample Image

If this is what you wanted here is the snippet:

#nav .cell strong{
    color: blue;
    width: 100%;
    display: inline-block;
    position: relative;
    height: 3em;
    line-height: 3em;
}

 #nav .cell:first-of-type strong::after{
        content: '';
        display: inline-block;
        position: absolute;
        width: 200%;
        height: 1px;
        background-color: blue;
        bottom: 0;
        left: 0;
      }

<div id='nav'>
  <div class='row'> 

    <div class='cell'>
      <strong>Subject 1</strong>
      <ul>
        <li>item 1</li>
      </ul>
    </div>

    <div class='cell'>
      <strong>Subject 2</strong>
      <ul>
        <li>item 1</li>
      </ul>
    </div>  

  </div>
</div>

How to fix css3 pseudo class nth-child

Use these styles:

#id_offer .btn:first-of-type {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

The first button is not the first child of its parent, but it is the first of its type.

You should also select based on the ID in order to overcome Bootstrap's default borders.

.container {

    margin-top: 25px;

}

.btn-group-radio input[type=radio] {

    display: none;

}

.btn-group-radio input[type=radio]:checked + .btn {

    color: #333333;

    background-color: #e6e6e6;

    *background-color: #d9d9d9;

    background-color: #cccccc \9;

    background-color: #e6e6e6;

    background-color: #d9d9d9 \9;

    background-image: none;

    outline: 0;

    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);

}

.btn-group-radio .btn:last-child {

    border-top-right-radius: 6px;

    border-bottom-right-radius: 6px;

}

#id_offer .btn:first-of-type {

    border-top-left-radius: 6px;

    border-bottom-left-radius: 6px;

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

    <div class="container">

        <div class="btn-group btn-group-justified btn-group-radio" role="group" id="id_offer">

            <input checked="checked" id="id_offer_0" name="offer" value="1" type="radio">

            <label class="btn btn-lg btn-default" for="id_offer_0">Offer 1</label>

            <input id="id_offer_1" name="offer" value="2" type="radio">

            <label class="btn btn-lg btn-default" for="id_offer_1">Offer 2</label>

            <input id="id_offer_2" name="offer" value="3" type="radio">

            <label class="btn btn-lg btn-default" for="id_offer_2">Offer 3</label>

        </div>

    </div>

CSS3: box-shadow transition not working on pseudo class

It's because in latter snippet you change the direction of box-shadow from default (when not specify too) outset to inset.
Run my snippet to better undertand the point. Also read this great article about performance of box-shadow tranisition https://tobiasahlin.com/blog/how-to-animate-box-shadow/

#message-main #message {
  border: none;
  padding: 0.5em 0.75em 0.5em 0.75em;
  border-radius: $border-radius-input;
  background-color: $background-input;
  box-shadow: inset 0px 0px 0px #a7a7a7, inset 0px 0px 0px #f5f5f5;
  transition: all 0.3s ease-in-out;
  font-size: 1rem;
  width: 100%;
  min-height: 39px;
  resize: vertical;
  resize: block;
}

#message-main #message:focus {
  box-shadow: inset 5px 5px 8px #a7a7a7, inset -5px -5px 8px #f5f5f5;
}

<div id="message-main">
  <label class="label is-required" for="message">Ihre Nachricht</label>
  <textarea id="message" class="inputfields required" name="message" rows="10" cols="46" placeholder="Schreiben Sie uns Ihre Nachricht." maxlength="1250" spellcheck="true" required></textarea>
</div>

The :link pseudo-class does match visited links

It's a bit confusing but if you refer to the specification you will find:

UAs may therefore treat all links as unvisited links, or implement other measures to preserve the user's privacy while rendering visited and unvisited links differently.

This is what is happening here. The trick is to create some restrictions to avoid having a big difference between the styles of visited and unvisited links.

Technically, all the styles you will apply to a:link will also apply to a:visited unless you override them inside a:visited and you are limited to the styles that you can apply inside :visited so you cannot override everything:

You can style visited links, but there are limits to which styles you can use. Only the following styles can be applied to visited links:
color
background-color
border-color (and its sub-properties)
column-rule-color
outline-color
The color parts of the fill and stroke attributes
In addition, even for the above styles, you won't be able to change the transparency between unvisited and visited links, as you otherwise would be able to using rgba(), hsla(), or the transparent keyword. ^ref

Here is an example to illustrate:

a:link {
  font-size:50px;
  border:2px solid red;
  color:black;
  padding:20px;
  box-shadow:5px 5px 0 blue;
  display:inline-block;
  margin:10px;
}
a:visited {
 color:red; /* this will work */
 border:5px dotted green; /* only the color will work */
 background:black; /* This will not work because we cannot change transparent to opaque value */
 
 /*All the below will not work*/
  padding:0;
  box-shadow:-5px -5px 0 purple;
  display:inline;
  margin:9584px;
  font-size:10px;
}

<a href="www.something.comg">not visited</a>

<a href="#">visited</a>

Applying CSS3 to pseudo-class first-child

OK so I'll add another answer because it doesn't appear that anyone has solved all of your issues.

First, there is a typo in your css: background-image(url(path/to/image.jpg) is missing the closing paren.

To do what you want, however, there is a simple css selector :). In your example, you try nth-to-child(), but the correct syntax for what you want is nth-child(). Look below for two options, with a working demo.

.container:first-child:before

{

  display: block;

  content: "Before Element";

  /* other styling that you choose*/

}

/* the following selector will also work 

.container:nth-child(1):before

{

  display: block;

  content: "Before Element";

}

*/

<div class='wrap'>

  <div class='container'>

    Body Container content

  </div>

  <div class='container'>

    Footer Container content

  </div>

</div>