CSS's mysterious world of inline elements

Question

CSS's mysterious world of inline elements

I am in the process of trying to make a certain element, time, appear inline using CSS.

The HTML Code is:

  
  <nav class="vertical">
     <ul>
        <li><a href="#">Home Page</a></li>
        <li><a href="#">Black Canyon Map</a></li>
        <li><a href="#">Black Lake Map</a></li>
        ...
        <li><a href="#">Twin Sisters Map</a></li>
     </ul>
  </nav>

...

I am particularly interested in the section that begins with "section id="map""

Do you think this CSS code will work? If not, what would be the correct piece of code?


figure figcaption time {
    display: inline;
}

css

Answer 1

Answer №1

The concept of "time" is considered an element rather than a class, so the appropriate selector to target it would be:

figure figcaption time {
    /* attributes */
}

This selector will apply to all <time> elements nested within <figcaption> elements which are in turn nested within <figure> elements.

Examples where this selector would match:

<figure>
    <div>
        <figcaption>
            <div>
                <time />
            </div>
        </figcaption>
    </div>
</figure>

Examples where this selector would not match:

<div>
    <figcaption>
        <div>
            <time />
        </div>
    </figcaption>
</div>

For more information, refer to the official CSS2 Selector Specification.

Answer 2

The concept of "time" is considered an element rather than a class, so the appropriate selector to target it would be:

figure figcaption time {
    /* attributes */
}

This selector will apply to all <time> elements nested within <figcaption> elements which are in turn nested within <figure> elements.

Examples where this selector would match:

<figure>
    <div>
        <figcaption>
            <div>
                <time />
            </div>
        </figcaption>
    </div>
</figure>

Examples where this selector would not match:

<div>
    <figcaption>
        <div>
            <time />
        </div>
    </figcaption>
</div>

For more information, refer to the official CSS2 Selector Specification.

Answer 3

Answer №2

This is how it will function:

#map time{
   visibility: hidden;
}

Answer 4

This is how it will function:

#map time{
   visibility: hidden;
}

Answer 5

Answer №3

Do you want to display an image and include a time element together?

figure figcaption {
    display: inline-block;
}
figure img {
    display: inline-block;
}

Answer 6

Do you want to display an image and include a time element together?

figure figcaption {
    display: inline-block;
}
figure img {
    display: inline-block;
}

CSS's mysterious world of inline elements

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing CSS Positioning in a Slidebar

Hover over to see the impressive special effect produced by Scriptaculous Effect.Appear

Content in Material UI Card is not aligning to the center

Is it possible to convert a Button into an input text field?

Are the menubar menus positioned beneath a different div element?

There are currently no articles found that match the search query

Using jQuery .animate() leading to erratic input movements

Align the heading vertically when the div is set to position:absolute

Choosing sub-elements in CSS

Safari in iOS8 experiencing problems with -webkit-overflow-scrolling: touch;

Steps for placing a menu link at the far right edge of the menu

Showing tags with varying sizes

Obtain the location information upon the loading of the webpage

Is there a way to automatically scroll through a webpage?

implement css property solely when device is in landscape orientation

What methods does YepNope.js offer for assigning dynamic names to scripts?

Troubleshooting CSS issues on Internet Explorer 8

What is the best way to incorporate progressive JPEG images onto a website?

What is the best way to horizontally align a floated image with its text positioned at the bottom?

Utilize CSS in your HTML using Express framework