Is it possible to apply a specific style to only the first div with the class "bla" and not the second?
<div class="outer">
<div>
....(more div's, unknown how many)
<div class="bla">
....
<div class="bla">some content</div>
</div>
....
</div>
</div>
Assuming you are referring to sibling elements when mentioning adjacent elements, if you are talking about parent-child elements, please refer to the answer by User123. With that said...
Directly targeting the first element using CSS selectors alone may not be possible. However, you can apply styles to all elements except the first one. One approach is to define the styles for the first element and then override them for the rest of the elements. Here's how you can do it:
.element {
...styles for the first element...
}
.element ~ .element {
...override styles for the subsequent elements...
}
The symbol (~) between the two ".element" classes is known as the general sibling selector. For more information on this selector, you can visit the CSS selectors specification.
If you're unable to use any special selector, you can try a simple workaround for this issue:
.workaround {
/* add your styles here, for example: */
background-color: #00f;
}
.workaround .workaround {
/* reverse the style, for instance: */
background-color: transparent;
}
I hope this suggestion helps you achieve what you're looking for.
Based on the guidelines of pure css, it is not possible to select elements based on their order in the HTML. One can refer to the specifications (found here: http://www.w3.org/TR/CSS2/selector.html). The specifications do not mention anything about the quantity or sequence of HTML elements that match the specified selectors.
Using Javascript:
document.getElementsByClassName('bla')[0].style
UPDATE: JOPLOmacedo has provided a more efficient CSS-only solution
Additionally, I have discovered a method to target the second <p> element following an <h1> element:
h1 + p + p{
background: red;
}
Just wanted to share that with you.
I am designing a webpage layout that includes 2 navigation bars (top), a top-graphic (middle) flexbox, and a content flexbox (bottom). Within the top-graphic flexbox, I want to add a black box for text. However, I am facing issues with the box overflowing ...
Is there a method to display the next and previous buttons outside of the scroller frame when using jQuery thumbnail scroller by manos.malihu.gr? I have attempted to modify the button class in CSS to make them more prominent or visible, but unfortunately ...
Issue with Pseudo class before not displaying background colour in Safari browser To view the code, please visit the following link here HTML <div id='test'> <p>Test </p> </div> CSS #test { position: relative; per ...
How can I dynamically update the properties of a CSS class using C#? I need to change the background image, font size, font style, and font based on user input through an interface. Once the changes are saved, I store them in a database. However, when the ...
Issue at Hand: An issue arises with my navigation bar and text block animations. The fading effect applied on the text element causes inline styles to be added, thus disrupting the media query set to hide the text on smaller screens. If you disable the s ...
I created a div named "commentbox" and I want to apply a border with the color #ccc. However, I only want the left, top, and bottom sides of the div to be bordered, leaving the right side untouched. Thank you! ...
Having an issue with my jqgrid. As I load the table and fetch a large amount of data from the database, the loading process naturally takes a few seconds. However, during this time, I can see the column headers without any rows or styles applied to the jqg ...
Whenever I click a button, an ajax call is triggered to load various html code into a div with the id 'main'. While displaying the html content is not an issue, integrating and applying css and js code to my current page has proven to be challeng ...
(Apologies for the perplexing title) My intention was to create a slideshow gallery, and I stumbled upon an example here: https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp In this setup, you'll notice previews of images in a small bar b ...
I am currently working on a responsive form that contains 1 label, 1 input field, and 5 buttons. Both the buttons and the input field are located under col-8. The positioning I aim for the buttons is as follows: They should start below and align with ...
I am currently seeking a method to replicate the iOS Safari animation that occurs when opening a link in the background (the item jumps up and quickly animates to where it can be accessed) - This same animation is also seen on OSX Safari's "save to re ...
I'm trying to achieve a unique effect where a label gets styled and a div gets revealed when a checkbox is checked. Surprisingly, I've managed to make one happen without the other in my attempts. Even though the CSS is consistent in both instance ...
I recently implemented a two column layout on my WordPress site, and to ensure it remains responsive when the browser width is reduced, I utilized this specific solution. While the solution generally works well, I encountered an issue where the content in ...
I am looking for guidance on how to create a rotating image effect on a webpage using CSS/JS. The image should rotate into the plane of the page, similar to the example shown in this post. Can you assist me with this? To better illustrate what I'm tr ...
I tried to add some custom CSS to style the images on my checkmark boxes. The goal was to display an image with a checkmark when clicked, but unfortunately, it's not working as expected during testing. For this task, I utilized CSS and HTML from a he ...
I need to implement multiple tabs on a single page, how do I modify the code to make this possible? Take a look at the codepen for reference. Here is the jquery code I have written so far: var tabs = $(".tabContainer ul li a"); $(".tabConten ...
After writing this block of code, I discovered that clicking on one of the circles activates it and displays the corresponding content. Now, I am looking for a way to automate this process so that every 5 seconds, a new circle gets activated along with its ...
I recently designed a menu on https://codepen.io/ettrics/pen/ZYqKGb with 5 unique menu titles. However, I now have the need to add a sixth title to the menu. After attempting to do so by adding "strip6" in my CSS, the menu ended up malfunctioning and looki ...
Looking for assistance with this code snippet. I am trying to align the text within the spans to the bottom of the stars. <ng-container *ngIf="starCount"> <span>Not Relevant</span> <button mat-icon-button ...
When I try to display images or videos in modal divs, they end up being taller than my screen size: Here is my code snippet: <div class="modal fade" id="showMedia" tabindex="-1" role="dialog" aria-hidden="true"> < ...