Struggling with selecting specific divs in CSS.
Snippet of my code:
<div class="card">
<div class="test">Asdasdasd</div>
</div>
<div class="card">
<div class="test">Asdasdasd</div>
</div>
<div class="card">
<div class="test">Asdasdasd</div>
</div>
<div class="card">
<div class="test">Asdasdasd</div>
</div>
My goal is to only style the first and third "test" divs (or the fifth one if there are six card divs).
I attempted to use :nth-child(odd) without luck.
Perhaps the application was not done correctly, you can try this Fiddle
.card:nth-child(odd){
color:green;
}
.card:nth-child(odd){
color:green;
}<div class="card">
<div class="test">Asdasdasd</div>
</div>
<div class="card">
<div class="test">Asdasdasd</div>
</div>
<div class="card">
<div class="test">Asdasdasd</div>
</div>
<div class="card">
<div class="test">Asdasdasd</div>
</div>If you want to apply it to the test element, you can check out this Fiddle
.card:nth-child(odd) .test{
color:green;
}<div class="card">
<div class="test">Asdasdasd</div>
</div>
<div class="card">
<div class="test">Asdasddfdfsvxcvasd</div>
</div>
<div class="card">
<div class="test">Asdasdasd</div>
</div>
<div class="card">
<div class="test">Asdasdasd</div>
</div>My goal is to trigger the display of a modal when a button is clicked. The modal should be shown by clicking this button: <asp:Button ID="Button4" runat="server" class="btn btn-info" data-toggle="modal" OnClientClick="return false;" data-target="#View1 ...
After creating a webpage, setting up Apache2 on an Ubuntu server to access it over the internet, and installing PHP5 and MySQL, I encountered issues with accessing database information on my page through a .php file. Despite having a file named test.php th ...
This section is what I'm working on. <section ID="Cover"> <div id="searchEngine">hello</div> </section> I am trying to achieve a fade in/out effect specifically for the background image of the Cover section. T ...
I have a group of check-boxes that I would like to toggle their content when checked. Currently, I am using jQuery to achieve this functionality, but I am searching for a way to optimize my code so that I do not need to write a separate function for each ...
I want to streamline my CSS file by setting up generic variables that can be used throughout to ensure consistency and organization. For example: @shadow: 6px 6px 10px rgba(0,0,0,0.2); .shadow { box-shadow: @shadow inset; } However, when I try to a ...
I'm experimenting with the tagsinput plugin in a textarea located within a div that is loaded using the jquery dialog plugin. The specific plugin I am using is /xoxco/jQuery-Tags-Input. After checking that the textarea element is ready, I noticed th ...
UPDATE: Follow this link to access the editor for my Stackblitz application, which demonstrates a simplified version of the issue regarding the "transfer" of value between the first and second controls. I am currently developing a dynamic form in Angular ...
I am currently working on my first next.js project, transitioning from create-react-app, and I've encountered an unusual issue. When I refresh the home page, the CSS styles persist without any problem. However, if I navigate to a different page like " ...
Is there a way to change the direction of a Splide slider in a responsive design? I'm running into issues when attempting to adjust the thumbnail slider's direction in responsive mode. var secondarySlider = new Splide("#splidev2", { ...
Imagine this snippet of CSS code: .notif-icon { display: inline-block; } In my HTML, I have the following element which starts off hidden by overriding the display property of the notif-icon class: <span id="error" class="notif-icon& ...
Even though I've positioned the style.css file after Bootstrap, it still isn't working. Upon inspection, I noticed that... https://i.sstatic.net/ay621.png How can I solve this issue? .bg-info{ background-color: #17a2b8 !important; } ...
I am working on a foreach loop that creates a series of checkboxes with items from a database. Currently, none of the checkboxes are pre-checked and each time a user checks one, a JavaScript function is called. Now, my clients want the first checkbox to b ...
Hello everyone! I have a code that includes login and registration forms as tabs. When we click on either one, it goes to the respective form. Now, I want to make a change by removing the Register tab and adding it as a signup button next to the login butt ...
JSFiddle In my fluid layout, I have a div with a required aspect ratio of 1:1. This div can contain text, an image, or both. The challenge is to vertically align the text and ensure the image fits within the div without exceeding its boundaries or losing ...
Can someone please help with this code? I'm trying to redirect to the value of each radio button when it's clicked. Any guidance or JavaScript code would be greatly appreciated. Thank you. I've tried multiple solutions but none of them seem ...
Check out this code: body{ background-image:url('http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg'); } div.header{ background-color:#F0F8FF; text-align:center; padding:3px; ...
If the Font Awesome icons are displaying as blank squares in all browsers despite correctly linking the stylesheet and attempting to install the package through npm which results in a npm ERR! code E401, it can be frustrating. Even after checking the brows ...
There are two distinct types of components that I am working with, which I will refer to as .a and .b. It is possible that these components have been assigned certain CSS animations. I do not have the ability to control these keyframes, whether they are a ...
var header = $("#accordion"); $.each(data, function () { header.append("<a id='Headanchor' href='javascript:toggleDiv($(this));'>" + this.LongName + "</a>" + "<br />", "&l ...
Is there a way for the control bar to automatically disappear when the video is paused? Thank you in advance! ...