Is there a way in CSS to style every second group of three elements? If so, how can this be achieved?
For example, in the code snippet below, how can we style the 4th-6th and 10th-12th li elements?
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
While JavaScript and jQuery can handle this task, is there a CSS-only solution available?
If you want to style specific child elements, you should use the nth-child selector:
ul li:nth-child(6n+4),ul li:nth-child(6n+5),ul li:nth-child(6n+6) {
background:red;
}
To achieve this effect, you can use a single selector that combines the use of :not and :nth-child.
ul > li:not(:nth-child(6n+1)):not(:nth-child(6n+2)):not(:nth-child(6n+3)) {
color:blue;
}
If you want to style all elements, you can use another selector in addition to the previous one. Check out the jsFiddle here.
ul > li:not(:nth-child(6n+4)):not(:nth-child(6n+5)):not(:nth-child(6n+6)) {
color:red;
}
By combining both selectors, you can style all elements as needed. Take a look at the demo here.
I'm not a professional web designer. I attempted to create a web layout with scrollable columns containing data in anchor tags that are loaded dynamically. To achieve this, I created an HTML table structure along with a stylesheet. Here is the source ...
How can I modify the CSS code to display the author and title of a book when there is no image available from the Google Books API? Currently, users see a custom image linked here, but it's not clear what it represents without the name and author inf ...
I have a unique project where I am developing a user interface for a paper-rock-scissor game. To create the UI, I included four buttons: "Start game," "rock," "paper," and "scissor." Initially, I wrote separate code for each button, which worked perfectly ...
.main-content{ height: 100%; width: 60%; min-height: 800px; background-color: white; border-radius: 5px; margin-left: 1%; border: solid 1px black; } .profile-banner{ display: flex; flex-direction: row; justify-content: space-between; ...
Having trouble changing colors and CSS in the TAB PANEL using material-ui. Any tips or suggestions? :( It seems like useStyle and theme functions are not working as expected. I was able to modify other properties like scrollable, but colors seem to be fix ...
I am searching for an effortless method to implement a feature similar to the expandable search text field in angular-mdl. By clicking on a search button, it will expand into a text field. <!-- Expandable Textfield --> <form action="#"> < ...
When I click the "add to bag" button, all other buttons also display the animation. How can I make sure that only the clicked button shows the animation? Any suggestions? <Table responsive> <thead> <tr> ...
Hey there! I'm currently using Bootstrap to design an application and I've got the entire form inside a container. However, as I add more child elements within the container div, I would like the parent div to expand automatically to show all the ...
Looking to align a list to the right in the header section, here is the code snippet: <div class="collapse navbar-collapse" id="app-header-nav"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item"> <a class=" ...
I have implemented a basic JavaScript function that dynamically changes HTML content based on the width of the browser window. When in mobile view, it removes the attribute data-hover, and when in desktop view, it adds the attribute back. The functionalit ...
Currently, I am in the process of creating a template page that includes a navbar and a footer with the intention of adding additional columns within the main div (container-fluid) at a later stage. However, I have encountered two issues that I cannot seem ...
image description hereI'm facing an issue with displaying a table in HTML. I've been struggling for three days to find a solution, asked multiple questions without success. Any help would be greatly appreciated. I am trying to use the table tag a ...
Here are the buttons I am working with - <div class="nav nav-tabs " id="nav-tab" role="tablist"> <a style="text-decoration:none" class="nav-item nav-link" data-toggle="tab& ...
Is there a way to make a collapse open on desktop and closed on mobile using only Bootstrap? On Desktop: https://i.sstatic.net/IwHCv.png On Mobile: Here, the content should only be displayed when you click on the title of each group https://i.sstatic.n ...
I am currently working on creating an image that can be clicked to cycle through different images all within the same frame. While I have managed to get it to work, I am facing a limitation where it only responds to one click. count = 1; function myF ...
Looking for the optimal method to place a div in various locations on a webpage while anchoring it from the bottom left. The div should be able to be attached to any element on the page for relative positioning, specifically intended for a tooltip. Each ...
I am encountering an issue on my work2 Website where the footer is not staying at the bottom of the page when there is limited content. I have searched extensively on Google, YouTube, and CSS tricks for a solution, but have not found one that works for my ...
I'm currently working on styling the layout of my MySQL database results using a combination of HTML and CSS. My goal is to have all the "hi's" displayed under the column labeled "Good Comment," while the "asasd" and 4 occurrences of "BAD" shoul ...
Within my HTML document, the following code is present: <div ng-repeat="selection in selections" style="margin-left:{{marginLeft}}%;width:{{progress}}%;background-color:{{selection}}"> </div> In my controller, I have implemented function ...
Currently, I am working on making my modal responsive. However, I am encountering an issue with the positioning of the "SAVE" button. The button is not staying in the desired position but instead disappears. Below is the snippet of my HTML and CSS: .dele ...