What is the best way to make the first LI elements stand out in a nested structure by applying bold

I had an idea like this:

#list li > a {
  font-weight: bold;
}

However, I only want the top level items to be made bold, not nested LI's within LI's -- hope that makes sense?? :)

EDIT | 

  <ul id="list">
    <li><a href="#">A</a>
        <ul>
            <li><a href="#">B</a>
                <ul>
                    <li><a href="#">C</a></li>
                    <li><a href="#">D</a></li>
                </ul>
            </li>
            <li><a href="#">E</a></li>
        </ul>
    </li>
    <li><a href="#">F</a></li>
    <li><a href="#">G</a></li>
    <li><a href="#">H</a></li>
  </ul>
csscss-selectors

Answer №1

To make your selection more precise, you should include more specific details:

#list > li > a

This will target any a element that is directly inside an li element that is directly inside the #list element (assuming that #list is the parent ul, even though it's not explicitly stated in your example).

You can test this out at http://jsbin.com/segig/1/edit?css,output.

No additional markup or rules are needed for this solution, making it a clean and straightforward approach.

Answer №2

It seems challenging to prevent the cascading effect of CSS, requiring the specification of classes throughout. Check out this Fiddle Demo

Here is the HTML structure:

            <ul class="first">
                <li><a href="#">A</a>
                    <ul class="innerfirst">
                        <li><a href="#">B</a>
                            <ul>
                                <li><a href="#">C</a></li>
                                <li><a href="#">D</a></li>
                            </ul>
                        </li>
                        <li><a href="#">E</a></li>
                    </ul>
                </li>
                <li><a href="#">F</a></li>
                <li><a href="#">G</a></li>
                <li><a href="#">H</a></li>
              </ul>

CSS styling for the elements:

            .first {
              font-weight: bold;

            }

            .innerfirst {
                font-weight: normal;
            }

Answer №3

To achieve this effect, CSS can be utilized

The key concept you're seeking is known as pseudo elements or CSS selectors

  • Consider using first-line instead of first-child

SOLUTION:

JSBIN

http://jsbin.com/dogol/1/edit

HTML

<html>
  <body>
<ul>
    <li class="ml"><a href="#">A</a>
        <ul>
            <li><a href="#">B</a>
                <ul>
                    <li><a href="#">C</a></li>
                    <li><a href="#">D</a></li>
                </ul>
            </li>
            <li><a href="#">E</a></li>
        </ul>
    </li>
    <li class="ml"><a href="#">F</a></li>
    <li  class="ml"><a href="#">G</a></li>
    <li class="ml" ><a href="#">H</a></li>
  </ul>
  </body>
</html>

CSS

.ml:first-line
{
  font-weight: bold;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The functionality of the anchor tag is restricted in both Chrome and Safari browsers

I'm having an issue with HTML anchor tags not working properly in Chrome and Safari. Instead of scrolling up, the page scrolls down when clicked. Here is the HTML code I'm using: <a id="to-top"></a> <a class="button toTop" href="# ...

javascriptjqueryhtmlcssgoogle-chrome

Mastering Bootstrap: Achieving flawless column stacking in succession

I am currently integrating bootstrap into my existing HTML code, but I only require it in two specific sections to avoid rewriting the entire code. Everything looks fine on my 1080p screen as intended. However, when I resize the screen slightly The titl ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Exploring the Power of JQuery Load and CSS styling

Currently, I am dynamically loading text into a div. However, I am encountering an issue where the content below this div is constantly shifting depending on the loaded text. Is there a way to restrict the space allocated to the div with the dynamic conte ...

jquerycssajax

Placing a pseudoelement amidst the track and thumb of a range input type

I'm trying to position a pseudo element with a specific z index that is lower than the thumb of an input type range but higher than its track. This is what I have so far: HTML: <div class="range"> <input type="range" name="" class="progre ...

csshtmlz-index

How to access a particular tab in Bootstrap 5 using an external link

Is there a way to direct users to a specific tab upon clicking a link on another page? Check out the example below: <div class="products-btn"> <a href="products.html#pills-profile">view all</a> </div> On Pro ...

javascripthtmlcssbootstrap-5

Align images of varying sizes vertically within div containers, even when the image is larger than the div itself

I'm facing a challenge when it comes to aligning images vertically inside divs. The problem arises due to the following conditions: The images will have varying and unknown sizes. These images are larger than the divs they are contained in, requiri ...

javascriptjquerycssvertical-alignment

Align Bootstrap navigation bar items at the center horizontally

I am currently working on a navigation bar that features two icons, evenly distributed. To achieve this look, I have been experimenting with scaling the icons horizontally in order to make them center-aligned within the navigation bar. However, I have not ...

javascripthtmlcssbootstrap-4uinavigationbar

Why isn't margin working with position: fixed?

I need help finding a solution for incorporating margin in a box within my App class. The issue is that the position fixed property doesn't seem to work as intended. <div className="App"> <div className="box"> ...

htmlcss

Why does getElementById work when getElementsByClassName doesn't?

I created a script with the purpose of hiding images one and two, while keeping image 3 visible and moving it into their place. The script functions correctly when using div Id's instead of div Classes. However, I prefer to use div classes for groupin ...

javascripthtmlcssfunctiongetelementsbyclassname

Extension for Chrome - Personalized pop-up notification when page loads

I am looking to create a custom alert box that triggers on page load instead of the default one, which I find unattractive and possibly irritating for users. alert('hello'); My current approach involves the following code: manifesto.js "cont ...

javascripthtmlcssgoogle-chrome-extension

Error: Material-UI prop type validation failed - Please specify either `children`, `image`, `src`, or `component` prop

Despite having an image prop in CardMedia, I kept encountering this error. Here is a snippet of the code: Error description: const Post = ({ post, setter }) => { const classes = useStyles(); return( <Card className={classes.card} ...

javascripthtmlcssreactjsmaterial-ui

Alter the typography of the text that has been enhanced by Google

I am attempting to modify the default font of certain text that is processed through google-code-prettify within an angular directive. The structure of the template served by my directive appears as follows: <pre class= "prettyprint" style= "border:1p ...

cssangularjstemplatesfontssyntax-highlighting

How to Align Two HTML Forms Using CSS

I've been experimenting with various methods, but I'm still unable to achieve the desired outcome. Currently, my setup looks like this: However, what I really want is something more like this: The layout consists of a #Container div that conta ...

htmlformscss

Steps to make the placeholder in an MUI TextField component move to the top of the box instead of staying within the border:

I'm working on styling a text field in MUI to achieve the look shown in the image below: However, my current implementation looks like this: Currently, when I click inside the text field, the placeholder slides up and is positioned within the border ...

javascriptcssreactjsmaterial-ui

Spread out a div across a container's width

Currently, I am struggling to modify my css and html in order to have a div expand horizontally into a scrollable div. However, all I seem to get is the content stacking once the width limit is reached. Take a look at this fiddle for reference. The absol ...

htmlcss

Position pictures in the same row in a straight line

I am struggling to align a set of images properly. The screenshot below shows the current layout: My goal is to have all four images lined up in a single row, with any additional images starting on a new row. I have attempted various methods, but none ha ...

htmlcss

Adding a class to a clicked button in Vue.js

A unique function of the code below is showcasing various products by brand. When a user clicks on a brand's button, it will display the corresponding products. This feature works seamlessly; however, I have implemented a filter on the brands' lo ...

javascriptcssvue.jsvuejs2vue-component

Clicking to close tabs

I am currently working on implementing a tab functionality on my website and I want these tabs to be responsive. Here is the code snippet I have been using: function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.ge ...

javascriptjqueryhtmlcss

Using varied colors to style list items

Is there a way to apply three different colors to my list items? What is the best method for achieving this? This is what I have in my code: li { width: 33.333%; float: left; padding: 15px; list-style: none; } .light { background-color: #0 ...

htmlcss

The :after pseudo-element in action with multi-line text

Can the styling of the :after pseudo-element be applied to every line of multi-line text? Here is the code I am currently using: .container { width: 50px; } .text { position: relative; } .text:after { content: ''; position: ...

htmlcsslayoutpseudo-element