What is the best way to style odd and even divs in CSS?

I am struggling with applying different CSS styles to the odd and even divs in my code. The current implementation I have does not seem to be working as expected. I specifically want the styling to target only the direct children of the div, rather than any nested elements within the div.

.work-layer {
  display: flex;
  justify-content: center;
  flex-direction: column;
  color: white;
  height: 100%;
}

.work-container:nth-child(odd) {
  text-align: right;
  padding-right: 100px;
}

.work-container:nth-child(even) {
  text-align: left;
  padding-right: 100px;
}

.name {
  font-size: 3em;
  text-transform: uppercase;
}

.desc {
  font-size: 1.75em;
  width: 40%;
}

.url {
  font-weight: bold;
  font-size: 1.5em;
  color: white;
}

.work-layer {
  height: 300px;
}

.layer-textastic {
  background-color: rgba(0, 133, 255, 1);
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
<div class="work">
  <div class="work-container textastic">
    <div class="work-layer layer-textastic">
      <h1 class="name">Textastic</h1>
      <p class="desc">I made this website as an homage to a great little text editor for iOS known as Textastic</p>
      <a href="#" class="url">jordanbaron.me/Updated-Textastic-Site</a>
    </div>
  </div>
</div>

htmlcsscss-selectors

Answer №1

Instead of using .work-container:nth-child(even) and .work-container:nth-child(odd), you could switch to .work:nth-child(even) and .work:nth-child(odd) accordingly. If this solution doesn't meet your needs, feel free to share a visual representation through MS Paint to clarify your desired outcome.

Answer №2

It seems like your code for styling even and odd elements is working well. To align the text in the p-Tag to the right side, you can adjust the width of the .desc class by wrapping it in a div with 100% width and adding a float right style to the text within the div (specifically for odd .work-container).

Alternatively, instead of the previous code snippet, you can achieve the same effect by adding these 3 lines of CSS:

.work-container:nth-child(odd) p{
  margin-right: auto;
 }


.work-layer {
  display: flex;
  justify-content: center;
  flex-direction: column;
  color: white;
  height: 100%;
}

.work-container:nth-child(odd) {
  text-align: right;
  padding-right: 100px;
}

.work-container:nth-child(odd) .inner-desc{
  float: right;
}

.work-container:nth-child(even) {
  text-align: left;
  padding-right: 100px;
}

.name {
  font-size: 3em;
  text-transform: uppercase;
}

.desc {
  font-size: 1.75em;
  width: 100%;
}

.inner-desc{
  width: 40%
}

.url {
  font-weight: bold;
  font-size: 1.5em;
  color: white;
}

.work-layer {
  height: 300px;
}

.layer-textastic {
  background-color: rgba(0, 133, 255, 1);
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
<div class="work">
  <div class="work-container textastic">
    <div class="work-layer layer-textastic">
      <h1 class="name">Textastic</h1>
      <div class="desc">
        <p class="inner-desc">I made this website as an homage to a great little text editor for iOS known as Textastic</p>
      </div>
      <a href="#" class="url">jordanbaron.me/Updated-Textastic-Site</a>
    </div>
  </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

- Bullet point: Table heading alignment variation

When it comes to centering a <th> element inside an <li>, different browsers have different approaches. In Internet Explorer, Edge, and Safari, the <th> is center-justified. However, in Chrome, Firefox, and Opera, it's left-justifie ...

csshtmlcross-browser

display a container and navigate to the specific link

Greetings! Could someone please help me make this code function properly? I am attempting to display the DIV (slidingDiv) and navigate to the selected ANCHOR (#anchor-01 + #anchor-02 + #anchor-03)... However, the code currently only allows me to go to the ...

javascriptjqueryhtmlanchor

Showing a numerical value in the bottom-right corner alongside a backdrop of an image

I am attempting to create a container that measures 26x26 pixels and showcases a number at the bottom right corner of this container. Furthermore, I want to include a 24x24 picture as the background of the container. The code I have written so far is disp ...

htmlcss

What is the best way to capture videos using Safari?

Hey there! I've set up the browser camera on my website for users to record live tests. It's been working great on Chrome and Firefox using MediaRecorder, but unfortunately, Safari isn't cooperating. Does anyone know of an alternative to Me ...

javascripthtmlsafari

What's the deal with this occurrence? The width of the HTML window seems

Exploring different html markup and layouts, I stumbled upon this JSFiddle: http://jsfiddle.net/vLJAq/15/. I made some modifications to it, but one thing that puzzles me is why the green box disappears when the window width is reduced? Here's the cod ...

htmlcss

What is the best way to create an image in the shape of a perfect circle?

Incorporating the Bootstrap V5.0 framework into my project, I set out to create a div containing a circular image along with some text content. While I was able to use a 50% radius to achieve a circular shape, I encountered an issue where the height of t ...

htmlcssflexboxbootstrap-5circleimage

I'm attempting to make the button hover color transparent, but unfortunately, it's not having any effect

Check out the code snippet below. I'm attempting to adjust the button hover color to transparent. The div class is "button_container" while the button class is "btn". I made changes to the color initially, but it doesn't seem to be working. Any a ...

htmlcsswordpresshover

Is there a way to remove CSS based on the generated HTML code?

Currently tackling a project in Next.js involving custom SCSS, Bootstrap SCSS, and React-Bootstrap. Struggling with the bloated size of our main.scss file due to unused CSS. After observing that 95% of the CSS is not utilized, I aim to eliminate all unnec ...

javascripthtmlreactjssassnext.js

What is the best way to toggle an element's visibility using the select tag?

Let me break down the issue for you. In my HTML code, I have a select element that looks like this: <select id="seasons" multiple="multiple"> <option value="s01">Season 1</option> <option value="s02">Season 2</option> ...

javascripthtmljqueryhtml-select

Achieving equal height divs using Bootstrap

I have a row of 8 divs arranged horizontally, and I am looking to make them all the same height. Right now, their heights vary based on the content inside each one. Can someone offer some assistance? I've attempted multiple solutions without success s ...

htmlcsstwitter-bootstrap

The jQuery click event is failing to trigger

I am facing an issue with some buttons that have specific classes. Here is an example: https://i.sstatic.net/CVIR2.png Each of these buttons contains JSON data stored in a data attribute. I have created a function to detect when a button is clicked and p ...

javascripthtmljqueryjquery-events

Tips for positioning a background image behind page content

I have a webpage with a background image, and now I want to add content that floats over it. However, the code below is placing the content behind the image. How can this be corrected? It's important to note that I'm attempting to achieve the ef ...

htmlcss

What is the best way to locate an element using text in xpath?

Having an issue with this HTML source code: <td class="specs_title"> Processortype <a href="#" class="info-link"> <img src="x.jpg" title="" height="16" alt="" width="16" /> <span class="info-popup"> <span class="hd">Processor ...

phphtmltextxpathfind

How can the height of div1 be made equal to the container and div2 without using JavaScript?

Here is the structure of the HTML: <div id="container"> <div id="blue-box"> </div> <div id="red-box"> </div> </div> The CSS styling for these elements is as follows: #container { background-color:blue; ...

htmlcss

How can the default text color be adjusted in NSAttributedString when initialized with HTML dark mode?

During the process of converting my existing app to dark mode, I came across an instance where I needed to initialize a UITextView with an NSAttributedString for displaying some legal text from the app store. While everything looked good in light mode, swi ...

htmliosswiftnsattributedstring

What is the maximum file size that the data link is able to store?

For instance, a file like an image, video, or sound can be saved in the data link Take an image for example, it may be stored with the initial link: data:image/jpeg;base64,/..... followed by various characters. But, is there a specified size limit at whic ...

javascripthtmlimageimage-processing

Using Mat-Error for Two Way Binding leads to frequent triggering of ngModelChange事件

I am working with a mat input field that has two-way data binding using ngModel, and I want to add validation using mat-error and formControl. <mat-form-field [formGroup]="myForm"> <input matInput formControlName="myFormName" autocomplete="off" ...

htmlangulartypescript

jquery is in motion while svg paths are at a standstill, waiting to

i have been attempting to incorporate a css-animated svg into my project. initially, the animation would start automatically, which was undesirable. after some research, i discovered that by declaring it as paused and then triggering it using jQuery with $ ...

javascriptjquerycsssvgpath

What can be done to prevent the aspect ratio from being altered?

I am working on creating a parallax effect using a background image that is set to a width of 100% and a height of 700px. I have set the image to have a fixed attachment, but the problem arises when I change the size of the browser window - the picture los ...

htmlcssaspect-ratio

What is the correct way to implement ::v-deep(<inner-selector>) in a Vue component?

I am attempting to assign an existing style class to a child element that will be loaded using the v-html directive. Since /deep/ and >>> are no longer supported, I have tried using ::v-deep in Vue. <template> <div v-else v-html="chi ...

cssvue.jsvuejs2vuejs3