Delete the right border on the items in the bottom row

I have a list of items with three rows. I want to separate the first and second row with borders, so I added a right border to those items but excluded the third row from having borders.

.test-row {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: column;
}

.test-row-item {
  padding-bottom: 3.2rem;
  border-right-color: #2C327A;
  border-right-width: 1px;
  border-right-style: solid;
}
<div class="test-row">
  <div class="test-row-item">
    1
  </div>
   <div class="test-row-item">
    2
  </div>
   <div class="test-row-item">
    3
  </div>
   <div class="test-row-item">
    4
  </div>
   <div class="test-row-item">
    5
  </div>
   <div class="test-row-item">
    6
  </div>
   <div class="test-row-item">
    7
  </div>
  <div class="test-row-item">
    8
  </div>
  <div class="test-row-item">
    9
  </div>
  
</div>

htmlcsscss-selectors

Answer №1

To customize this scenario, incorporate an additional CSS directive that eliminates the right border starting from the 7th occurrence by utilizing the selector .test-row-item:nth-child(n+7):

.test-row {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: column;
}

.test-row-item {
  padding-bottom: 3.2rem;
  border-right-color: #2C327A;
  border-right-width: 1px;
  border-right-style: solid;
}

.test-row-item:nth-child(n+7) {
  border-right: none;
}
<div class="test-row">
  <div class="test-row-item">
    1
  </div>
  <div class="test-row-item">
    2
  </div>
  <div class="test-row-item">
    3
  </div>
  <div class="test-row-item">
    4
  </div>
  <div class="test-row-item">
    5
  </div>
  <div class="test-row-item">
    6
  </div>
  <div class="test-row-item">
    7
  </div>
  <div class="test-row-item">
    8
  </div>
  <div class="test-row-item">
    9
  </div>

</div>

Answer №2

.test-row {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: column;
}

.test-row-item:nth-child(n + 4) {
  padding-bottom: 3.2rem;
  border-left-color: #2C327A;
  border-left-width: 1px;
  border-left-style: solid;
}
<div class="test-row">
  <div class="test-row-item">
    1
  </div>
   <div class="test-row-item">
    2
  </div>
   <div class="test-row-item">
    3
  </div>
   <div class="test-row-item">
    4
  </div>
   <div class="test-row-item">
    5
  </div>
   <div class="test-row-item">
    6
  </div>
   <div class="test-row-item">
    7
  </div>
  <div class="test-row-item">
    8
  </div>
  <div class="test-row-item">
    9
  </div>
  
</div>

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 JavaScript and CSS properties are not functioning properly with the HTML text field

I came across this CodePen example by dsholmes and made some modifications: Here Furthermore, I have developed my own form on another CodePen pen: Link The issue I'm facing is related to the placeholders/labels not disappearing when typing in text f ...

javascriptjqueryhtmlcss

Obtain HTML tags from RSS CDATA section

Is there a way to extract HTML tags from a CDATA tag in an RSS feed? I have utilized a basic jQuery function to retrieve the JSON object from the RSS, below is my code: $.get("someURL", function(data) { console.log('InGet'); ...

jqueryhtmljsonxml-parsingrss

Updating the image source attribute using Vue.js with TypeScript

Let's discuss an issue with the img tag: <img @error="replaceByDefaultImage" :src="urls.photos_base_url_small.jpg'"/> The replaceByDefaultImage function is defined as follows: replaceByDefaultImage(e: HTMLImageElement) ...

htmltypescriptimagevue.js

Can you provide guidance on how to use Javascript to submit a form specifically when the input name is labeled as "submit"?

Query: How can I use Javascript to submit a form when one of the form inputs is named submit? Scenario: I need to send users to another page using a hidden HTML form. Unfortunately, I cannot modify the names of the inputs in this form because it needs to ...

javascripthtmlform-submit

Utilizing "Content" for Responsive Image Design in Chrome Version 33.0.1750.117

I previously implemented a method for responsive images on my website, which was working fine until the latest Chrome update. Surprisingly, it still functions properly on other browsers. //< ![CDATA[ var queries = [ ...

javascripthtmlcssgoogle-chromeresponsive-design

Is it possible to transfer the style object from PaperProps to makeStyles in Material UI?

I am working with a Material UI Menu component and attempting to customize its border. Currently, I am only able to achieve this customization by using PaperProps inline on the Menu element. However, I already have a makeStyles object defined. Is there a ...

javascriptcssreactjsmaterial-ui

Tips for locating a button within a nested div element using Selenium and Python

As a new user of Selenium for Python, I am facing a specific issue. My goal is to locate and click on a button automatically. Below is the code for the button: <div class="check-button button-display"> <div class="side-way side-way_left"> ...

pythonseleniumselenium-webdriverxpathcss-selectors

Should pages be indexed to index.php or should the top and bottom parts of the page be created and included in all content pages?

I've been out of the webpage creation game for a while, but I've recently decided to get back into it. Like everyone else, I want to learn the best way to do this. However, I find myself facing a dilemma on how to structure my pages. My initial i ...

phphtmlcsslayoutinclude

CSS loop to centrally align divs

I am facing an issue where I want to center the divs in a panel. Each div is generated within a for-each-loop inside the panel. However, the problem arises when they are displayed as block elements: https://i.sstatic.net/RvnlX.jpg When I try floating them ...

htmlcssprimefaces

Chrome browser alignment problems

Here are the lines in my code: <TD id=“avail_1” style=“display:none;availability:hidden”>UrgentAvail</TD> <TD id=“avail1_1” style=“display:none;availability:hidden”>substitutedBy</TD> When I test the application o ...

htmlcssjsp

What is the best way to choose the initial p tag from an HTML document encoded as a string?

When retrieving data from a headless CMS, the content is often returned as a string format like this: <div> <p>1st p tag</p> <p>2nd p tag</p> </div> To target and select the first paragraph tag (p), you can extract ...

javascripthtmlselectors-api

Fixing the CSS 404 error caused by using variables in Flask routes: A step-by-step guide

I have created a basic web application to showcase book reviews. Upon a successful search, users are provided with links to book titles - when a link is clicked, the goal is to pass the ISBN of the selected book to the url_for method and then present the c ...

htmlcsspython-3.xflask

What is the solution to eliminating the horizontal scroll bar on a responsive website?

Currently in the process of developing a responsive website, I have encountered an issue with excess empty space appearing on the right side when scrolling horizontally. Utilizing overflow-x: hidden successfully eliminates the horizontal scroll; however, t ...

widthhorizontal-scrollingcss

Why do I see my footer displayed twice on the page?

<div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li> @Ajax.ActionLink("Imagenes List", "Images", "Home", new { page = 0 }, new AjaxOptions() ...

cssajaxasp.net-mvcrazor

The attribute selector is malfunctioning

Currently, I am attempting to target img tags based on the alt attribute in order to correctly load a background-image on mobile devices. The issue I am encountering is that regardless of the combination of attribute selectors I use, it does not seem to w ...

imagecsscss-selectorsselector

I would like to learn how to showcase a two-column array using PHP and HTML

In my current setup, I have a collection of icons that are displayed in groups of 4. This means that if there are 7 icons, the 4th icon on the first slide will be repeated as the 8th icon on the second slide. To resolve this issue, I am looking to iterate ...

phphtmlarraysmagento

Can the functionality of a button be disabled after being clicked a total of 5 times?

Once a user clicks the button five times, I plan for it to be disabled. Can this be achieved solely with HTML, or would JavaScript be necessary? ...

javascripthtml

What are some ways to make the search bar on my website smaller in both length and width?

I have a WordPress website with the ivory search plugin installed for the search functionality. You can check out my website at www.osdoc.in. I am looking to make the search bar shorter and narrower as it is currently causing the menu icons to encroach on ...

csswordpresswordpress-themingcustom-wordpress-pages

Button Hover Effect: Transition with Style

I am trying to implement a one-second transition from the default color scheme to the hover color for a Button element in Material UI. I am using the transitions.create(props, options) method as described in this article: https://medium.com/@octaviocoria/c ...

javascriptcssreactjsmaterial-ui

PHP MySQL outputting data in a dropdown menu format

Struggling to extract data from a database and display it as a dropdown list. I am fetching the foreign key, its unique code, and its name/title to be displayed in a dropdown list for input into a new table. $sql = "SELECT quali_code, title FROM ...

phpmysqlhtml