Styling each list item individually, without interdependence

I am working on a ul that contains several list items comprised of h3s and lis with the "close" class.

When I hover, I want to expand the letter spacing on the h3s, but the items with the close class also expand. I have tried using nth child selectors in the code without success. I would like the close classed lis to remain the same size when the h3s are expanded.

Any assistance on this issue would be greatly appreciated.

To view the code, visit: https://jsfiddle.net/snowwhyte/7eLmarnp/7/#&togetherjs=Uq5j49dUG0

CSS:

a {text-decoration:none;
}
li {list-style:none;
}
}
#openClose {
    position:absolute;
    top:200px;
    margin-top:55px;
}

#openClose li{
    list-style-type:none;
    display:block;
    padding-right:-50px;
}

#openClose li:nth-child(2n+2){
    margin:30px 0 100px 0;
    background-color:#000;
    border:2px #fff solid;
    text-align:center;
    letter-spacing:1rem;
    padding:10px 0 10px 0;
}
#openClose li:nth-child(2n+2):hover{
letter-spacing:-0.1rem; 
transition:.3s;
}

#openClose li a h3{
font-family:Helvetica, Gotham, Helvetica, Arial, sans-serif;
color:#73a6c2;
}

.close{
}

#openClose li a h3:hover{color:#fff;
text-shadow:2px 1px 2px #000;
transition:.2s;
letter-spacing:1rem;
}

a:visited { text-decoration: none; color:#B8CEDB; }
a:hover { text-decoration: none; color:#D7D8D8; }
a:focus { text-decoration: none; color:#fff; 

}

HTML:

<section id="openClose">
<ul>
<li><a href="#wrapper"><h3>Tool Descriptions</h3></a></li>
<li class="close"><a href="#">Close</a></li>
<li><a href="#wrapper2"><h3>Key tools</h3></a></li>
<li class="close"><a href="#">Close</a></li>
<li><a href="#wrapper3"><h3>Adjustment Layers & <br>
Blending modes</h3></a></li>
<li class="close"><a href="#">Close</a></li>
</ul></section>

Answer №1

One important thing to note is that without a specified width, all elements will take on the width of the largest element in the container.

If you are looking to achieve a specific layout, there are several solutions available depending on your requirements.

For example, you could set a fixed width on a parent element such as the ul and add the white-space: nowrap property to the h3 tag (see the fiddle):

ul {
    width: 200px;
}
#openClose li a h3{
    white-space: nowrap;
}

Alternatively, you could designate a fixed width for the list item containing the close button (see the fiddle):

#openClose li:nth-child(2n+2){
   width: 200px;
}

Answer №2

I took a shot at it. I made some modifications to your code by combining certain elements and tidying up a bit, but the key focus is on the width attribute of .close

https://jsfiddle.net/9sK2jtLq/7/

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

Tips for shifting a designated row upward in Chrome using JavaScript

Currently, I am working on a Javascript function that moves up a selected row. However, the issue I am facing is that when the row moves up, the old row is not being removed. For instance, if I move up the 'bbbb' row, it successfully moves up bu ...

Compiling a list of products, but the user interface needs some adjustments

Currently, I have designed a product list menu that includes a hover dropdown feature. This means that when a user hovers over a specific menu item, the corresponding list will automatically appear. However, I am facing two issues with this setup. Firstly, ...

What is the best way to create a div that maintains a consistent size while displaying images inside?

Struggling with a project and attempting to create a fixed div container for uniform picture sizes, I've tested various methods recommended by others but have had zero success in altering the size of my div container. Could it be due to my use of boot ...

Buttons are misaligned and do not align on a straight line

Below is the code output: https://i.stack.imgur.com/avhUu.png I am attempting to enhance the symmetry of these buttons. The minus (-) button appears slightly smaller than the plus (+) button even though they have the same padding. I have experimented w ...

Latest iOS and Safari updates are now stripping away classes that have been dynamically added through jQuery scripts during scrolling

Ever since the recent iOS Update (8+), Safari seems to be interfering with a jQuery script I rely on for my mobile navigations. The markup is a standard unordered list generated from Contao. What happens now is that when I view my page on iOS 8+, the scri ...

The JQuery function .html() fails to include all the HTML content retrieved from a JSON response

I've created some HTML using PHP's json_encode(), and it looks like this: ob_start(); if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post(); get_template_part( 'template-par ...

Unable to fetch css file in Node.js

I am currently in the process of learning Node.js, but I have encountered a small issue with retrieving data from a css file. Interestingly, when I directly add the data to the index file's code, it seems to work perfectly. Let me share the relevant ...

Creating a banner image that scrolls while maintaining a fixed size

I'm looking to add a banner image with a scrolling effect as users navigate down the page, but I'm not sure what this technique is called. An example of what I'm trying to achieve can be seen on this site. As the user scrolls down, the res ...

Locate a div element based on its inner text and then apply a specific

I am looking to target a specific div based on its inner text, and then add a class to it. How can I achieve this? For example, consider the following input: <div>First</div> <div>Second</div> <div>Third</div> The desi ...

Steps to selectively enable or disable checkboxes in a dynamic table depending on a dropdown selection

I'm currently facing an issue with a dynamically generated HTML table from a JSON file. Each row in the table consists of a dropdown list and a checkbox. I need the checkbox to be disabled when the default value is selected in the dropdown, and enable ...

Eliminate the hover effect from every element

Is there a method in CSS or Javascript that allows me to eliminate the hover effect on all elements? I am specifically looking for a solution that will disable the hover effect on mobile devices while keeping it intact on desktop. I attempted using pointer ...

Expanding sidebar height to match parent using Flexbox

Looking for the best way to adjust a child element to match the height of its parent? I've experimented with various techniques, but haven't had much success. I'm leaning towards using flexbox as it seems to be the latest trend. Here's ...

How to place an absolutely positioned div inside a scrollable div with overflow-y: scroll

Here is the HTML code: <div class="container"> <div class="scrollable-block"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, whe ...

Express template failing to connect with scripts, css, and images

When using Express, I encounter difficulty in getting the css, js, and images to link up correctly when running the index.html file. The images are not showing up and the css and js files are not linking properly. <link rel="stylesheet" type="text/css" ...

Is it possible to adjust the position/target values of a webkit CSS transition without interrupting its operation

Is there a way to smoothly change the target position or attributes of a running transition without halting it? To illustrate, let's consider this initial animation: -webkit-transition:-webkit-transform 5s ease-in-out -webkit-transform: translate3d( ...

Ensure that the div element spans the entire width of the screen

Having issues working with the div tag and encountering this problem: The left side doesn't extend as far as the right side, despite testing in multiple browsers. Here is the HTML code being used: <!DOCTYPE html> <html lang="en"> <h ...

Position the middle character within a span that has the identical width and height

My goal is to align characters in the center of a span. CSS span{border-radius:10px; width:20px; height:20px; color:#fff; background:#cc0000; text-align:center; line-height:20px; display:block;} HTML <span>+</span><br> <span>-&l ...

Creating a rhombus or parallelogram on a canvas can be easily achieved by following these simple

I'm new to working with the canvas element and I want to create some shapes on it. Can someone provide me with guidance on how to draw a Rhombus or Parallelogram on a canvas? Something similar to what is shown in this image: https://i.stack.imgur.c ...

Click on the ng-click attribute to access the HTML page

I need a button that can perform the following tasks: Execute multiple functions from the controller using ng-click(they must be called in HTML) Direct to another html page located in "static/page.html" onclick, when used for navigation (location.hr ...

Material-UI React Native components: Injecting Styles without Props

import {createStyles, WithStyles} from "@material-ui/core"; const styles = (theme: Theme) => createStyles({ root: {} }); interface MyProps extends WithStyles<typeof styles> { } export class MyComponent extends Component<MyProps ...