Utilize the ::before pseudo-element exclusively for the initial node

Question

Utilize the ::before pseudo-element exclusively for the initial node

Here is the text I need to generate :

https://i.sstatic.net/HzKP9.png

This represents my HTML code :

<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style5.css">
<title> Département TI </title>
</head>

<body>
<h1>Département TI</h1>
    
<ul>

  <li>TC</li>
  <li>2ème année
  <ul>
      <li id="a">DSI</li>
      <li id="a">SEM</li>
      <li id="a">RSI</li>
    </ul>
  
  </li>
  <li>3ème année</li>
</ul>


</body>

</html>

Additionally, here is my CSS code :

li {list-style-type: none;}
li::before
{
content: "-*-"; 
}

The output I am currently receiving looks like this:

https://i.sstatic.net/Az1YH.png

html css

Answer 1

Answer №1

When using the :first-child selector, it will still target both elements. To address this, you can apply the li:before rule as you already have, and then override that rule for ul > li > ul. Here is an example:

li {
  list-style-type: none;
}

ul > li::before {
  content: "-*-";
}

ul > li > ul > li:before {
  content: none;
}

Alternatively, you could wrap your ul tags inside another element so that you can use :first-child on the ul itself. Here's how you can do that:

<h1>Information Technology Department</h1>

<div>
  <ul>
    <li>TC</li>
    <li>2nd year
      <ul>
        <li id="a">DSI</li>
        <li id="a">SEM</li>
        <li id="a">RSI</li>
      </ul>
    </li>
    <li>3rd year</li>
  </ul>
</div>

And here is the corresponding CSS:

li {
  list-style-type: none;
}

div > ul > li:before {
    content: "-*-";
}

Answer 2

When using the :first-child selector, it will still target both elements. To address this, you can apply the li:before rule as you already have, and then override that rule for ul > li > ul. Here is an example:

li {
  list-style-type: none;
}

ul > li::before {
  content: "-*-";
}

ul > li > ul > li:before {
  content: none;
}

Alternatively, you could wrap your ul tags inside another element so that you can use :first-child on the ul itself. Here's how you can do that:

<h1>Information Technology Department</h1>

<div>
  <ul>
    <li>TC</li>
    <li>2nd year
      <ul>
        <li id="a">DSI</li>
        <li id="a">SEM</li>
        <li id="a">RSI</li>
      </ul>
    </li>
    <li>3rd year</li>
  </ul>
</div>

And here is the corresponding CSS:

li {
  list-style-type: none;
}

div > ul > li:before {
    content: "-*-";
}

Utilize the ::before pseudo-element exclusively for the initial node

Answer №1

Similar questions

JavaScript does not function properly with dynamically loaded content

Arrange CSS to distribute list items across two rows with an unlimited number of items

Guide on How to Include data (PDF Base 64) in angular 6 component

What are the steps to position this bootstrap drop-down menu above a fixed page header?

Transform Angular Material Table selection color with selection

You can move freely between classes A and B, as well as classes A and C, but there is no transition allowed between

JavaScript: a single function and two calls to Document.getElementById() results in both returning "undefined"

Delivering seamless css integration using express.js

Guide to creating an uncomplicated quiz using PHP

Storing dropdown selection as a variable in a PHP Ajax form

Switch the ng-bind-html option

showing text from chosen selection with an additional element included in the output

Connect-busboy: The file being piped to the write stream is either empty or incorrect, depending on its type

Which is more accessible: a disabled textbox or a div with role="textbox"?

Exchanging items through Drag and Drop

Issue with SVG mask not functioning when transform is applied

Unraveling AngularJS: Mastering the Art of Interpolating Interpol

A guide on changing the background color to complement the light/dark theme in Bootstrap 5.3

Child div set to 100% height within parent div with auto height

Seeking Assistance with Customizing HTML Uniform Panels