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

Implemented an HTML hyperlink element precisely positioned

I have the following HTML code. I am trying to fix the position of an anchor tag called "View All" so that it stays in a specific location. However, whenever the value in the dropdown menu changes, the anchor tag moves according to the length of the new se ...

htmlcss

Struggling with getting the local slick slider to run smoothly

After installing the slick slider plugin and trying out some basic examples on jsfiddle, I encountered an issue when running it locally. For some reason, the results I get when testing it on my local environment are different from what I see on jsfiddle. ...

jqueryhtmlcssslick.js

Adjust the dimensions of the dropdown menu

Objective: How can I adjust the width of a select dropdownlist that is utilizing bootstrap v2? Challenge: I am uncertain about how to modify the width in the context of bootstrap. Additional Information: Keep in mind that there are three dropdownli ...

javascriptjqueryhtmlcsstwitter-bootstrap

Unable to locate image files stored in vendor/images in the Rails 4 view

I have successfully set up a custom bootstrap theme with Rails 4, and placed the image file here: /vendor/assets/images/custom_bootstrap_theme/demo/bg01.jpg The index.html.erb file is referencing this image as follows: <img src="/vendor/assets/image ...

cssruby-on-rails

Creating a responsive grid division

.subcategory-main-wrapper { display: grid; grid-template-columns: repeat(4, max-content); position: absolute; width: 100%; column-gap: 4%; justify-content: center; height: 360px; @media @tabletScreens { height: 280px; } @media @ ...

htmlcssresponsive-designcss-grid

Align the image in the center of the page horizontally

Is there a reason why aligning an arbitrary image horizontally is so challenging (or as one response mentioned, "It is not possible.")? I previously had centered images that were functioning correctly for years; however, suddenly they stubbornly position t ...

htmlcssimagecentering

Switch the cursor to display the magnifying glass icon for zooming in and out

I am curious about how to modify the cursor shape to display a zoom in and zoom out symbol. Changing the cursor to indicate busy or wait status is something I am familiar with, document.manual_production.style.cursor='wait'; However, I am unsu ...

javascripthtmlcss

Ways to ensure CSS affects icon inside main element?

Struggling to match the background color of Material-UI icons with the rest of the list items on hover. The CSS is not applying to both the icon and text despite styling the overall class (className= "dd-content-item"). Any assistance would be greatly appr ...

javascriptcssreactjsmaterial-ui

The div element with the id "wrapper" is not functioning properly within the box model

I have defined an ID wrapper in CSS: #wrapper { position: relative; background: yellow; -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2); width: 960px; padding: 40px 35px 35px ...

javascriptjqueryhtmlcss

Utilizing jQuery to Adjust Tab Transparency

I'm trying to add some opacity to my jQuery tabs, but so far I've only been successful with accordions. Any tips or tricks for achieving this effect with tabs? Styling with CSS .ui-tabs{ background-image: none; background: rgba(204, 204 ...

javascriptjqueryhtmlcss

Troubleshooting problem with ion-input in Ionic 3 regarding the keyboard issue

Issue with Keyboard Overlaying Button In my ionic3 app, I am facing an issue where the keyboard overlaps the "Registrarse" button when it is open, as shown in the image. The button is positioned at the bottom of the ion-content using CSS rules such as pos ...

htmlcssangularionic3

What is the best way to incorporate an input bar in a Bootstrap panel header?

When designing a search box in my panel header, I floated both elements to get them onto the same line. Although functional, the vertical alignment of the title is displeasing and I am seeking a way to improve this without drastically changing its size. I ...

htmlcsstwitter-bootstrap

I'm having trouble getting rid of this stubborn loader on the website

I am currently utilizing the following template: . My objective is to eliminate the preloader progress bar that displays the loading progress of the page in percentage. The files associated with this preloader are as follows: Loader CSS File - www[dot]the ...

javascripthtmlcsshtml5-canvas

What is stopping this paragraph from being vertically centered with just one line?

After following instructions from another user, I successfully centered text vertically. However, I encountered difficulties when trying to center the entire content vertically. My attempt to enclose the text in its own div did not yield the desired result ...

csshtml

Using CSS to customize the dropdown text styling of a select box within a custom wrapper

I have a specific customized dropdown menu using the styled-select wrapper: HTML: <div class="styled-select"> <select name="example_length" aria-controls="example" class=""> <option value="10">10</option> <option value="25"> ...

htmlcssdrop-down-menu

Enhance your table with custom styling by incorporating the seanmacisaac table and placing the tbody within a div

I am looking to make adjustments to a Jquery sortable, searchable table created by seanmacisaac. For more information, visit the link: Does anyone know how to set the height of the tbody to a fixed value while allowing vertical scrolling (overflow-y)? & ...

javascriptjquerycssscrollhtml-table

Dynamic row Material-UI input field

Is there a way to create a multiline TextField component that expands to take full height on different devices? https://i.sstatic.net/5y3lG.png* I am familiar with fullWidth, but is there an equivalent for setting the height of the component to full on r ...

cssreactjsmaterial-ui

Tips for repairing a button on an image backdrop and ensuring its position remains unchanged during resizing

My goal is to add tags to people's faces on my website. While I am aware of the image map property, I am facing an issue where the background of the main Div needs to be set to 'cover'. However, when the window is resized, the coordinates of ...

jqueryhtmlcsstagsimagemap

Unable to keep button contained within form's card design

Currently enhancing my Bootstrap skills and seeking assistance with a card and form alignment issue. Struggling to properly place a form within a card. Any suggestions or insights on resolving this? <div class="row row-content col-sm-8"> &l ...

csstwitter-bootstrapbootstrap-4

Placing a materialUI circular progress bar on top of the circular icon

I'm striving to add a circular progress bar that surrounds a circular icon with a visible space between the two elements, just as depicted in the image below. Although I successfully positioned the circular progress bar around the icon, creating adequ ...

cssreactjsmaterial-ui