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

Html – selective use of a pseudoclass

I am using a pseudo-class to change the bullets of all unordered li elements by default to 4 boxes and a white right pointing arrow (▢▢▢▢▷):

      li:before {
        content: "25A225A225A225A225B7";
        padding-right: 0;
      }

I would like to add another pseudo-class to change certain lis to have the same 4 boxes but a black right pointing arrow (▢▢▢▢▶):

      .known li:before {
        content: "25A225A225A225A225B6";
        padding-right: 0;
      }

<li>general data</li>               <-default for most
<li class="known">marked data</li>  <-those few select cases

Apparently this method (using a class selector) doesn’t work with pseudo-classes.

I am fairly new to pseudo-classes, as I just learned to use them to change all bullets to something else but don’t know how to conditionally apply them (like using a class).

As it stands now, I would have to change content to ” and manually add the boxes and arrow types to each li element’s data.

Tags:

2

Answers


  1. 0

    You can use following code, to select list items with the .known class:

    li.known:before {
  content: "25A225A225A225A225B6";
  padding-right: 0;
}

    Using .know li:before would access all <li>-elements inside of all .known-elements.

    Using the upper approach, you are selecting all <li>-elements with the .known class.

    Login or Signup to reply.
  2. 0

    You have to use li.known::before as a selector:

    li::before {
  content: "25A225A225A225A225B7";
  padding-right: 0;
}
 
li.known::before {
  content: "25A225A225A225A225B6";
  padding-right: 0;
}
    <li>general data</li>
<li class="known">marked data</li>

    .known li::before looks for li that are child elements of an element with the class: known. A space between selectors means that the following must be a descendant (not a direct one).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search