css Question posted in
Some basic documentation can be found here.

Usage of pseudo classes inside the css itself?

.obj1a,
.obj2b,
.obj3c
{
    border: 1px solid #c6ffc7;
}

.obj1a:hover:not(:focus),
.obj2b:hover:not(:focus),
.obj3c:hover:not(:focus)
{
    border: 1px solid white;
    outline: 2px solid white;
}

.obj1a:focus,
.obj2b:focus,
.obj3c:focus
{
    border-width: 3px;
}

The code above is what I’m currently using, and it works just fine. However, I was wondering if there’s any easier way to do it. Like using pseudo classes inside the css itself, like shown below. Is it possible to do something like that?

.obj1a,
.obj2b,
.obj3c
{
    border: 1px solid #c6ffc7;
}

.obj1a,
.obj2b,
.obj3c
{
    border:hover:not(:focus): 1px solid white;
    outline:hover:not(:focus): 2px solid white;
    border-width:focus: 3px;
}
Tags:

2

Answers


  1. 0

    Unfortunately, there is no such use. But you can build a different structure with SCSS:

    .obj1a, .obj2b, .obj3c {
  border: 1px solid #c6ffc7;
  
  &:focus {
    border-width: 3px;
  }
  
  &:hover:not(:focus) {
    border: 1px solid white;
    outline: 2px solid white;
  }
}
    <button class="obj1a">obj1a</button>
<button class="obj2b">obj1a</button>
<button class="obj3c">obj1a</button>
    Login or Signup to reply.
  2. 0

    That syntax is not allowed but you could simplify a bit the code using an attribute selector. Also, you could control the values using some custom properties (variables)

    [class^="obj"] {
  border: var(--bw, 1px) solid var(--bc, #c6ffc7);
  outline: var(--ow, 0) solid #fff;
}

[class^="obj"]:hover:not(:focus) {
  --ow: 2px;
  --bc: #fff;
}

[class^="obj"]:focus {
  --bw: 3px;
}



body {
  display: grid;
  place-content: center;
  min-block-size: 100vh;
  background: linear-gradient(45deg, #546fb2, #90b436);
  font: 1rem/2 system-ui;
}
    <a href="#" class="obj1a">obj 1a</a>
<a href="#" class="obj2b">obj 2b</a>
<a href="#" class="obj3c">obj 3c</a>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search