Utilizing a variety of pseudo classes within a single div element

Looking to achieve an outward border effect on an unlimited number of Divs.

Experimenting with Pseudo classes like :first-of-type and :nth-of-type(#) but facing issues as the :nth-of-type(#) is overriding the :first-of-type.

.quarter > div:first-of-type { border-right:dashed #cccccc 1px; border-bottom: dashed #cccccc 1px; padding: 10px; box-sizing: border-box; }
.quarter > div:nth-of-type(3n+1) { border-right: none; border-bottom: dashed #cccccc 1px; }

Attempting to exclude all but the first and last elements in each third row, may require jQuery. Open to suggestions for a better approach if available. :)

csscss-selectors

Answer №1

:first-of-type is a subset of :nth-of-type(3n+1) for n = 0 (since 3(0) + 1 equals 1). This results in an override when both rules target the first div.

Given that both selectors have equal specificity and no additional declarations are present in the second rule that are not already in the first rule, you can simply switch the order of the rules to give priority to your :first-of-type rule:

.quarter > div:nth-of-type(3n+1) { border-right: none; border-bottom: dashed #cccccc 1px; }
.quarter > div:first-of-type { border-right:dashed #cccccc 1px; border-bottom: dashed #cccccc 1px; padding: 10px; box-sizing: border-box; }

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

What is the best way to ensure that an HTML cell automatically adjusts its width to fit all of its content?

Here is an example to illustrate my question: <table style="width: 100%;"> <tr> <td>First Cell</td> <td>Second Cell</td> </tr> </table> Is there a way to set the widths in such a manner th ...

htmlcssgwt

Top method for achieving a smooth transition in a loading CSS3 animation

Having trouble implementing a fade in/fade out effect on a div with a CSS3 based login animation when a function is loaded. I have set up a jsfiddle but still can't get it to work. Any assistance would be greatly appreciated! http://jsfiddle.net/adam ...

javascriptjquerycssfadeinfadeout

New programmer seeking to apply a dim effect to the entire photo while also adding a highlight when the image is hovered over

I am looking to add a special effect to my photos where they appear dimmed but highlighted when hovered over. Any guidance on how to achieve this would be greatly appreciated! The image is contained within a flexbox div that also contains a clickable lin ...

htmlcss

Placing text alongside an image at the top of the page

Here's the HTML code generated by JSF: <div align="center"> <img src="images/background_image.jpg" height="200px" width="30%" style="vertical-align: top"/> <span style=""> Welcome abc, <input type= ...

htmlcsstext-alignment

Creating submenus that cause the navigation menu to drop down

I created a basic navigation bar using HTML Lists. The initial structure looks like this: <div id="menu"> <nav> <ul> <li><a href="#">My Profile</a></li> <li><a href="#" ...

htmlcss

Evenly distribute top and bottom padding within a fixed-height border using CSS

I'm facing a challenge with centering the content vertically on an online certificate that users can print out. The main issue lies in aligning the inner wrapper (#wrapper) inside the outer border (#outerBorder), which has a fixed height to ensure pro ...

csspadding

Determine the vertical dimension of an element through a JavaScript event listener

I've been working on creating an Apple-style image sequence scroller from a codepen demo. Here's the link to the original: https://codepen.io/jasprit-singh/pen/LYxzQjB My goal is to modify the JavaScript so that the scroll height is based on a p ...

javascripthtmlcss

Best practices for embedding Internal CSS and rectifying missing classes in mobile view for email templates on Gmail

I am currently facing an issue with my email template. While it works perfectly fine in Outlook web and the Outlook app, Gmail web and Gmail's internal CSS strip away certain classes automatically. In an attempt to hide the pre-header on mobile devic ...

htmlcsshtml-email

Discovering the CSS Selector Path for Selenium in C#

I recently started working with Selenium C# automation and have been having trouble finding the solution online. The HTML code that I am dealing with is as follows. My goal is to locate a specific element using CSS and click on it. It's worth noting t ...

c#cssselenium

Tips for excluding two attributes when styling a CSS calendar selection

Let's say I have a table structured like this: <td class="search-unit-custom-control-calendar-day search-unit-custom-control-calendar-day--not-this-month"> <time class="search-unit-custom-control-calendar-day__number">--</time> ...

javacssselenium-webdriver

The browser is displaying the scene, but the Three.js Geometry is not visible

After following a tutorial and successfully getting the entire scene to work within the body tag, I decided to move it inside a div. However, now only the scene itself is rendered. Despite not receiving any errors and ensuring everything is accessible thro ...

javascripthtmlcssthree.js

Ways to position a button in the center of an image

Just a quick query about HTML and CSS. How can I position a button on top of an image in the center? Here is the current code: .button-link{ text-decoration:none !important; color:white; } .button-td{ background:#FFA06A; text-align:center; } ...

htmlcss

What do I need to know about Bootstrap Collapse?

Initially, everything was functioning smoothly. However, after deleting some JS files and unused CSS, I encountered a problem with the accordion buttons not expanding. I thought my implementation didn't require JS, but I made sure to reintegrate all r ...

cssbootstrap-4

What is the best way to layer a background image with a CSS gradient?

I've spent over an hour searching for the right answer with no luck, so I'm turning to you for help. On my main page, there's a div with a large image that looks like this: <div id="hero"></div> It's working perfectly at t ...

cssbackgroundgradient

SSL page on Wordpress struggles to load CSS files

My current website is on WordPress: The issue I am facing is on this particular page: , where the CSS is not loading correctly. This specific page uses SSL connection, and when checking through Firebug, I noticed that no CSS files are being sent. What co ...

htmlcsswordpressssl

Tips for generating an HTML template as a string using jQuery

I have developed a dynamic modal using plain JavaScript, triggered by a button click. This modal is controlled based on the attributes `data-open-hours` and `data-closed-hours` in the HTML. If you take a look at my demo, you will notice an issue. Let me e ...

javascriptjqueryhtmlcsstwitter-bootstrap

Ways to expand a navbar background without compromising the central alignment of its elements

I need the blue color of the navigation bar to cover the entire screen, while keeping the About, Updates, and Who am I? links centered. The background should adjust accordingly if there are any resizing changes. If there's a better method for centerin ...

htmlcss

Updating previous values in reactjs to a new state

I have a div set up to render multiple times based on data retrieved from the database. The background color of the div corresponds to the ID received from the backend. My goal is to change the background color of the currently selected div and remove the ...

javascripthtmlcssreactjs

Input tag styled in a center-aligned word document format

My Desired Text Alignment: I want the text to be centered horizontally at the top of the input. Words should break after hitting the internal padding, similar to how document creation software like Google Docs works with center alignment. Current Alignme ...

htmlcssreactjsinputbootstrap-4

Unexpected behavior observed when applying position: fixed to navigation elements

Check out this JSFiddle I put together to showcase the structure of my webpage using HTML and CSS: http://jsfiddle.net/du7NN/ I've been working on a page that has a sticky navigation bar which stays at the top while the rest of the content scrolls. ...

htmlcsscss-position