CODEWITHSUNDEEP
csshtml
lil_bugga
lil_bugga

Reputation: 91

Style a div with css that doesn't have an ID or Class

I'm looking for a way to style a div that has no ID or class association. I'm not looking for comments suggesting that I apply an ID or a class to the div's myself as the code I'm looking to modify is part of a wordpress plugin, which when updated would reset any styles I apply.

The code that I'm trying to modify is:

<div class="gallery_detail_box">
    <div><?php echo $post->post_title; ?></div>
    <div><?php echo the_excerpt_max_charlength(100); ?></div>
    <a href="<?php echo $permalink; echo basename( get_permalink( $post->ID ) ); ?>"><?php echo $gllr_options["read_more_link_text"]; ?></a>
</div>

I have tried targeting the div containing "post_title" as I want to make that bold and have tried several different ways but to no avail, my last attempt at targeting that div was:

.gallery_detail_box > #div {
    font-weight:bold;
}

.gallery_detail_box #div #div {
    font-weight:normal;
}

Where am I going wrong?

Upvotes: 1

Views: 794

Answers (6)

Abraham P
Abraham P

Reputation: 15481

Depending on what browser you are using this may or may not work. It will not work in older versions of IE(7,8), or any other browsers that don't support CSS 3.

.gallery_detail_box {
    font-weight:normal;
}

.gallery_detail_box div:nth-child(1){
    font-weight:bold;
}

For older browser

.gallery_detail_box {
    font-weight:normal;
}

.gallery_detail_box div:first-child{
    font-weight:bold;
}

To then apply custom styles to the second, third, etc nested div in the older browsers you would do:

.gallery_detail_box div:first-child + div{
    font-weight:bold;
}
/*(second)*/
.gallery_detail_box div:first-child + div + div{
    font-weight:bold;
}
/*(third)*/

etc.

Upvotes: 1

Rene Koch
Rene Koch

Reputation: 1291

Give your div a class. Its poor browser optimization to do:

.class div{}

Because the browser does a reverse search through the dom when adding css to elements.

https://developers.google.com/speed/docs/best-practices/rendering

Upvotes: 0

pauljz
pauljz

Reputation: 10901

Easiest way to do this will be with a first-child psuedoselector.

.gallery_detail_box div:first-child {
    font-weight: bold;
}

This has ramifications for older browsers. Check the MDN compatibility chart to see if any of your target browsers are affected: https://developer.mozilla.org/en-US/docs/CSS/:first-child

If you need to target child elements beyond the first, you can use the :nth-child(2) psuedoselector.

The other option would be to use JavaScript, which would work reliably in, well, any browser with JavaScript support.

Upvotes: 0

Bryan Allo
Bryan Allo

Reputation: 696

To target each of the child DIVs Try this:

div.gallery_detail_box div:nth-child(1) {....}
div.gallery_detail_box div:nth-child(2) {....}

Good Luck.

Upvotes: 1

Peter Gluck
Peter Gluck

Reputation: 8236

Take out the # sign. When targeting a type selector you just use the selector name without any prefix.

Upvotes: 1

Brandon
Brandon

Reputation: 70032

# is used when referencing IDs. A div is not an ID but a tag.

Try

.gallery_detail_box div {
   font-weight: bold;
 }

Upvotes: 2

Related Questions