Show a border line within the <ol> element without the need for repeating CSS styles

I am currently working on creating a grid view using . I have been able to achieve the desired output, which displays borders only inside the outer box. However, I had to duplicate style rules to accomplish this. I'm looking for suggestions on how to achieve the same result in a more efficient way. Here is an image of the result: Grid selector

    .ui-draggable, .ui-droppable {
        background-position: top;
    }
    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active
    {
        border-bottom: 1px solid red;
        border-left: 1px solid red;
        background: #fff;
        font-weight: normal;

    }

    .ui-state-default-left, html .ui-button.ui-state-disabled:active
    {
        border-left: none;
        border-bottom: 1px solid red;
        background: #fff;
        font-weight: normal;
    }

    .ui-state-default-bottom, html .ui-button.ui-state-disabled:active
    {
        border-left: 1px solid red;
        border-bottom: none;
        background: #fff;
        font-weight: normal;
    }

    .ui-state-default-left-bottom, html .ui-button.ui-state-disabled:active
    {
        border-left: none;
        border-bottom: none;
        background: #fff;
        font-weight: normal;
    }

    #selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 20rem; }
    #selectable li { padding: 0.3rem; float: left; width: 2rem; height: 2rem; font-size: 1.5rem; text-align: center; }

    </style>

    <ol id="selectable">
              <li class="ui-state-default-left">01</li>
              <li class="ui-state-default">02</li>
              <li class="ui-state-default">03</li>
              <li class="ui-state-default">04</li>
              <li class="ui-state-default">05</li>
              <li class="ui-state-default">06</li>
              <li class="ui-state-default">07</li>
              <li class="ui-state-default-left">08</li>
              <li class="ui-state-default">09</li>
              <li class="ui-state-default">10</li>
              <li class="ui-state-default">11</li>
              <li class="ui-state-default">12</li>
              <li class="ui-state-default">13</li>
              <li class="ui-state-default">14</li>
              <li class="ui-state-default-left">15</li>
              <li class="ui-state-default">16</li>
              <li class="ui-state-default">17</li>
              <li class="ui-state-default">18</li>
              <li class="ui-state-default">19</li>
              <li class="ui-state-default">20</li>
              <li class="ui-state-default">21</li>
              <li class="ui-state-default-left">22</li>
              <li class="ui-state-default">23</li>
              <li class="ui-state-default">24</li>
              <li class="ui-state-default">25</li>
              <li class="ui-state-default">26</li>
              <li class="ui-state-default">27</li>
              <li class="ui-state-default">28</li>
              <li class="ui-state-default-left">29</li>
              <li class="ui-state-default">30</li>
              <li class="ui-state-default">31</li>
              <li class="ui-state-default">32</li>
              <li class="ui-state-default">33</li>
              <li class="ui-state-default">34</li>
              <li class="ui-state-default">35</li>
              <li class="ui-state-default-left">36</li>
              <li class="ui-state-default">37</li>
              <li class="ui-state-default">38</li>
              <li class="ui-state-default">39</li>
              <li class="ui-state-default">40</li>
              <li class="ui-state-default">41</li>
              <li class="ui-state-default">42</li>
              <li class="ui-state-default-left-bottom">43</li>
              <li class="ui-state-default-bottom">44</li>
              <li class="ui-state-default-bottom">45</li>
              <li class="ui-state-default-bottom">46</li>
              <li class="ui-state-default-bottom">47</li>
              <li class="ui-state-default-bottom">48</li>
              <li class="ui-state-default-bottom">49</li>
    </ol>
htmlcss

Answer №1

Check this out - no classes are used, reducing the size of the stylesheet.

ol {
  width: 280px;
  height: 280px;
  float: left;
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  width: 40px;
  height: 40px;
  float: left;
  box-sizing: border-box;
  line-height: 40px;
  text-align: center;
  border-right: solid 1px red;
  border-bottom: solid 1px red;
}

li:nth-child(7n) {
  border-right: none;
}

li:nth-child(43),
li:nth-child(44),
li:nth-child(45),
li:nth-child(46),
li:nth-child(47),
li:nth-child(48),
li:nth-child(49) {
  border-bottom: none;
}
<ol>
  <li>01</li>
  <li>02</li>
  <li>03</li>
  <li>04</li>
  <li>05</li>
  <li>06</li>
  <li>07</li>
  <li>08</li>
  <li>09</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
  <li>32</li>
  <li>33</li>
  <li>34</li>
  <li>35</li>
  <li>36</li>
  <li>37</li>
  <li>38</li>
  <li>39</li>
  <li>40</li>
  <li>41</li>
  <li>42</li>
  <li>43</li>
  <li>44</li>
  <li>45</li>
  <li>46</li>
  <li>47</li>
  <li>48</li>
  <li>49</li>
</ol>

Answer №2

There are various methods to refactor your CSS, especially when multiple elements share the same properties:

1: Utilize comma

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active,
.ui-state-default-left-bottom, html .ui-button.ui-state-disabled:active,
.ui-state-default-left, html .ui-button.ui-state-disabled:active,
.ui-state-default-bottom, html .ui-button.ui-state-disabled:active {
    background: #fff;
    font-weight: normal;
}

2: Implement CSS selector

div[class^="ui-state"] {
    font-weight: normal;
    background: #fff;
}

By utilizing these two techniques, you can significantly reduce the total size of your CSS file while maintaining the same end result. With some additional refactoring, you can achieve this:

.ui-draggable,
.ui-droppable {
    background-position: top;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active,
.ui-state-default-left,
html .ui-button.ui-state-disabled:active,
.ui-state-default-bottom, html .ui-button.ui-state-disabled:active {
    border-bottom: 1px solid red;
    border-left: 1px solid red;

}

.ui-state-default-left,
html .ui-button.ui-state-disabled:active,
.ui-state-default-left-bottom, html .ui-button.ui-state-disabled:active {
    border-left: none;
}

.ui-state-default-bottom, html .ui-button.ui-state-disabled:active,
.ui-state-default-left-bottom, html .ui-button.ui-state-disabled:active {
    border-bottom: none;
}

div[class^="ui-state"] {
    font-weight: normal;
    background: #fff;
}


Edit:
For your element, you only need this minified version of CSS

#selectable {list-style-type: none;margin: 0;padding: 0;width: 20rem;}
#selectable li {padding: 0.3rem;float: left;width: 2rem;height: 2rem;font-size: 1.5rem;text-align: center;font-weight: normal;background: #fff;border-bottom: 1px solid red;border-left: 1px solid red;}
#selectable li.ui-state-default-bottom,
#selectable li.ui-state-default-left-bottom {border-bottom: none;}
#selectable li.ui-state-default-left,
#selectable li.ui-state-default-left-bottom {border-left: none;}

BUT if JavaScript will manipulate the classes, you will also need to include these classes:

#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
.ui-draggable, .ui-droppable {background-position: top;}

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

Every time I click on a section of an HTML webpage, JQuery retrieves the ID of that specific tag

How can I retrieve the id of an Html tag that has been clicked by a user on a web page using Jquery? I have attempted to do this, but it seems to only work for specific tags that are passed in the function. $(document).ready(function(){ $("p").click ...

jqueryhtml

JQuery experiencing compatibility issues in both Firefox and Chrome

Working on my ASP.NET webpage has presented me with a frustrating problem that I cannot seem to solve. After researching for three days, I have not found anyone who has faced this issue before or offered any solutions. The menu/submenu created using HTML ...

javascriptjqueryhtmlcssmenu

aligning images in the middle while placing my text beside

How can I align my text in the center of an image? |apple| |banana| text blah | X | | x | | X | | x | HTML Code: <p style="color:white;"> &copy;<% = year(now())%> company.CoZa | <a href="http://w ...

htmlcss

Is there a way to identify the source of a div's scrolling behavior?

While working on a complex web page that involves multiple JQuery Dialogs and other widgets, I encountered a frustrating issue. Some of the dialogs contain divs with scrolling abilities (using overflow-y with a fixed height). Whenever I click on one dialog ...

javascripthtml

Guide to changing the color of SVG images on a live webpage

I'm having trouble changing the color of a specific part within an svg image (created in Inkscape). I believe CSS is the solution, but I can't seem to select the id from the particular SVG file. The object in the SVG has the id='ToChange&apo ...

javascripthtmlcsssvg

The content has been successfully loaded using ajax, but it is not displaying

I've been experimenting with djax and have noticed that when I click on an anchor tag, the URL changes as expected. However, even though the page source reflects this change, the contents of the page itself remain unchanged. Any thoughts on why this m ...

javascriptjqueryajaxhtmlhtml5-history

Maximizing Efficiency: Top Techniques for Emphasizing Grid Rows with jQuery

Currently, I am facing an issue with the jQuery code I am using to highlight the selected row in my grid. It seems to be taking longer than anticipated to select the row. Does anyone have suggestions on how I can optimize this code for better performance? ...

javascriptjqueryhtmlgridview

Tips for properly positioning and rotating text in CSS and HTML!

My goal is to place a rotated headline next to some text, but I'm facing challenges with positioning when the page is resized. While absolute positioning works easily in a static scenario (left picture), it fails when the page size changes (right pict ...

htmlcss

Challenges with the Task List Board

I'm facing a bit of a challenge with this task. As a newcomer to JavaScript, I've set out on a quest to create a task list board where users can input tasks along with dates and times. The goal is for these entries to appear inside a photo using ...

javascripthtmlcssfunction

Combine multiple SCSS files located in various directories into a single CSS file by using NPM

In my project, there are SCSS files stored in a "static" directory. Additionally, I have application components located in a separate directory, each containing its own SCSS file. I am seeking a way to compile all of these SCSS files into a single .css fi ...

cssnode.jsnpmsass

Using scale transformations to animate SVG group elements

I am currently experimenting with an SVG example where I hover over specific elements to expand or scale them. However, I seem to have made a mistake somewhere or missed something important. Can someone offer me assistance? View the demo on JSFiddle here ...

javascriptjqueryhtmlcsssvg

What is the most effective method for developing and hosting a Python web application that can securely collect user input and store it in SQL databases?

Currently, I am embarking on a project to streamline data entry for myself. I have SQL tables set up in an Azure database, and I can effortlessly write Python code to add data to them. However, my next endeavor is to develop a web application that allows ...

pythonhtmlsqlflaskweb-applications

The responsive navigation menu expands

Struggling with my responsive menu issue here. I must admit, I am not a coding expert by any means, but I've been tasked with web design responsibilities at work. The problem at hand is that the website isn't fully responsive, except for the "ar ...

javascriptjquerycssresponsive-designresponsive

Exploring the world of HTML display and the various data types in

My website titles don't break nicely when the lines are longer than the screen width, while the articles always display beautifully regardless of screen size. After conducting several tests, I discovered that the issue was due to the different data ty ...

phpmysqlhtml

Achieving Vertical Alignment of Two Divs with CSS

I've come across several solutions to my issue, but none of them seem to work in my current situation. I have a banner at the top of my site with two floated columns, and suspect that the navigation menu in the right column may be causing the problem. ...

htmlcsscss-floatvertical-alignment

Can CSS be used to create an animation effect with just this image?

Is it possible to incorporate a running image of "Pikachu" using CSS instead of creating a heavier GIF format? I have the image link and code below, but need assistance on how to implement it. Can you provide guidance? image: .pikaqiu_run { width: ...

htmlcsscss-animationscss-transitions

How can I evenly distribute three list items on a PhoneGap webpage using CSS?

My goal is to create a PhoneGap app with a main menu featuring a title and three buttons. Here is the layout: <body> <div class="app"> <div class="headerOne"> <h1></h1> </d ...

htmlcsscordova

Executing PHP function from another PHP file

Recently delving into functional programming in PHP, I'm scratching my head trying to figure out why this code isn't functioning properly. I have a separate file named 'functions.php' where I'm attempting to call a function from th ...

phphtmlmysqlfunction

What is the best way to align an HTML DIV with a logo on the left side?

I am trying to position a div called #top_menu in the center of the page. <div id="top_menu">This is the menu and it is centered on the page</div> Here is my CSS code: #top_menu { margin: 0 auto; width: 600px; ... } Next to the top menu, I ...

htmlcsslayoutcentergraphical-logo

Blending PHP with jQuery

I'm currently working on the same page as before but this time, I'm using it to experiment with jQuery. I'm trying to learn it for my 'boss', but unfortunately, I can't seem to get the JavaScript in this file to run at all, le ...

phpjqueryhtml