Choose the initial class that follows a particular class

Question

Choose the initial class that follows a particular class

Looking to style only the .box div that directly follows the .wrap class in the following code snippet. If it appears after a <p> tag or any other class besides .wrap, I do not want to target it.

<div class="wrap">
    <div class="box">Apply style to this box</div>
    <p>random</p>
    <div class="box">Do not apply style to this box</div>
</div>

I attempted to use the adjacent sibling selector, but it doesn't seem effective in this scenario.

.wrap + .box{
    background: red;
}

JSFiddle: http://jsfiddle.net/8fjuz7sm/

Using :first-child isn't an option since it may occur just once too.

html css

Answer 1

Answer №1

Can you please include this code in your project:

.wrap .box:first-of-type{
    background:red;
}

Click here to see the demo.

Alternatively, you can also try using this code:

.wrap .box:nth-of-type(1){
    background:red;
}

Check out the demo here.

Answer 2

Can you please include this code in your project:

.wrap .box:first-of-type{
    background:red;
}

Click here to see the demo.

Alternatively, you can also try using this code:

.wrap .box:nth-of-type(1){
    background:red;
}

Check out the demo here.

Answer 3

Answer №2

According to @Hiral's suggestion, you can choose to utilize either first-of-type or nth-of-type(1).

If for some reason you are unable to do so directly, you may consider modifying the html by adding an extra class to the specific elements where you want to implement the desired style, like shown below:

<div class="wrap">
<div class="box red">Apply style to this box</div>
<p>random</p>
<div class="box">Do not apply style to this box</div>
</div>

Alternatively, you can resort to using javascript and/or jquery to target the first element and then apply the desired styling through javascript.

Example of jQuery Usage

$(".wrap .box").eq(0).css("Background-color","red")

Answer 4

According to @Hiral's suggestion, you can choose to utilize either first-of-type or nth-of-type(1).

If for some reason you are unable to do so directly, you may consider modifying the html by adding an extra class to the specific elements where you want to implement the desired style, like shown below:

<div class="wrap">
<div class="box red">Apply style to this box</div>
<p>random</p>
<div class="box">Do not apply style to this box</div>
</div>

Alternatively, you can resort to using javascript and/or jquery to target the first element and then apply the desired styling through javascript.

Example of jQuery Usage

$(".wrap .box").eq(0).css("Background-color","red")

Answer 5

Answer №3

Check out the JSFIDDLE I modified for you: http://jsfiddle.net/8fjuz7sm/4/

To ensure compatibility with older browsers, I suggest using jQuery instead of a pure CSS solution:

Start by creating a new class:

.wrapperbox {
    background: red;
}

Next, add this jQuery code to your script:

$( ".wrap > .box:first" ).addClass( "wrapperbox" );

With this code, any HTML element within a class named wrap that contains a child with the class box will now have the wrapperbox class applied, allowing you to style it with CSS.

If you prefer not to use jQuery, you can try this alternative:

.wrap .box:first-of-type{
    background:red;
}

This will target the first child of wrap with the class box and apply your desired styles.

Answer 6

Check out the JSFIDDLE I modified for you: http://jsfiddle.net/8fjuz7sm/4/

To ensure compatibility with older browsers, I suggest using jQuery instead of a pure CSS solution:

Start by creating a new class:

.wrapperbox {
    background: red;
}

Next, add this jQuery code to your script:

$( ".wrap > .box:first" ).addClass( "wrapperbox" );

With this code, any HTML element within a class named wrap that contains a child with the class box will now have the wrapperbox class applied, allowing you to style it with CSS.

If you prefer not to use jQuery, you can try this alternative:

.wrap .box:first-of-type{
    background:red;
}

This will target the first child of wrap with the class box and apply your desired styles.

Choose the initial class that follows a particular class

Answer №1

Answer №2

Answer №3

Similar questions

The CSS method to conceal the initial list item is proving ineffective

JavaScript function to convert a string of characters into a readable time format

Footer is stubbornly stuck in the middle of the page, refusing to budge despite the

Steps to vertically arrange a grid in Bootstrap

Safari's CSS Hacking Problem

Angular encounters issue when retrieving CSS file while navigating to a nested route

Triggers the request for Windows authentication when accessing a webpage on a website

Expanding scrollbar when hovered over

Display a modal pop-up containing HTML content

Ways to adjust Safari printing margins using CSS to achieve borderless printing

Is it necessary for a click handler to be triggered when clicking on a scrollbar?

When viewed on a mobile device, the page defaults to displaying the NumPad instead of the Text Keyboard in Angular

Steps for aligning an image to the right using Bootstrap Vue

Stop horizontal overflow of content

Tips on creating a line break within a text box

I struggle to format a classic HTML form dropdown menu that is populated using JavaScript

Troubleshooting a Horizontal Scroll Problem

Changing the Size of a Youtube Video Based on the Width of a DIV Element

What is the best way to display all the steps in a Material UI stepper when preparing a page for

Using a CSS pseudo-element within a PHP script does not produce the desired results