If both the p and blockquote elements are present, encase them in a single box

I have the following HTML structure:

<div class='header'>...</div>

Depending on the file, this div might contain different elements. In some instances, it could look like this:

<div class='header'>
  <p>
    ...
  </p>
 </div>

In other cases, it may appear as:

<div class='header'>
  <p>
    ...
  </p>
  <blockquote>
    ...
  </blockquote>
  <h1>
    ...
  </h1>
 </div>

I want to create CSS that wraps all <p> and <blockquote> elements in a single box within the .header, excluding the h1 element. Is it possible to achieve this with one set of CSS rules or do I need separate styles for each scenario?

htmlcss

Answer №1

.header .container {
  border: 1px solid #000;
}
<div class="header">
  <div class="container">
    <p>Paragraph</p>
    <blockquote>Block quote</blockquote>
  </div>
  <h1>H1</h1>
</div>

If you prefer not to introduce an additional div (through pure CSS), you would have to apply more intricate styling techniques to ensure that borders around each element seamlessly connect to create a unified box structure. This approach heavily relies on the overall design of your webpage.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to use Selenium WebDriver to automate an HTML5 webpage?

Within my application, there lies an HTML5 webpage. While attempting to inspect it and retrieve IDs/classname locators, I have encountered difficulties in obtaining the necessary locators for specific web elements. I have noticed that many of these elemen ...

javascripthtmlseleniumselenium-webdriver

Can CSS animation graphics slow down the speed and performance of your website?

Recently, I decided to dabble in web designing and incorporated CSS animations into my page. However, I encountered some issues with the design - particularly, the navigation bar is not functioning properly when scrolled. Moreover, the website seems to b ...

cssperformanceanimationload

Text-align problems causing confusion

Currently, I am developing a website aimed at raising awareness about the dangers of the internet. I am facing a frustrating issue with CSS where the text refuses to center both horizontally and vertically, and seems to be disobeying the styles applied. D ...

csstext-align

Do not exceed 3 elements in a row when using Bootstrap's col-auto class

col-auto is excellent. It effortlessly arranges items by size in a row, but I need it to strictly limit the number of items in each row to a maximum of 3. Each row should only contain between 1-3 items. <link rel="stylesheet" href="https://cdn.jsdeli ...

htmlcssbootstrap-4bootstrap-5

What is the best way to utilize :focus while simultaneously applying properties through Javascript?

When styling an input element with JavaScript, it seems that any properties set this way are ignored in a :focus rule. An example is provided to illustrate this: Initially, the background and border of the input element matches the surrounding element ( ...

javascriptjquerycss

Is there a method to implement a pop-in animated contact form without the use of Javascript or query selectors?

Although I was successful in creating a contact form with this functionality using Javascript, I encountered some difficulties when attempting to achieve the same result without it. My goal is for the form to slide in from the right when the "open" icon is ...

javascripthtmlcssformsanimation

I'm having issues with jQuery not functioning properly on my HTML page. The expected alert is not popping up upon page load

For some strange reason, I was expecting the alert "Doc Ready" to pop up, but it's not happening. What could be going wrong? The jQuery library is located in the js directory and I've tested it on all browsers but it's still not working. I a ...

javascriptjqueryhtml

Is there a way to condense the row navigation links into a dropdown menu button if the browser window size decreases?

I've noticed that on many websites, when you narrow the width of the browser window, the row of navigation links in the top navigation bar collapses into a dropdown menu button to prevent overflow. How can I implement this feature on my website? Righ ...

htmlcssoverflow

"Dynamically design a responsive mobile menu for Genesis Child Theme in Wordpress with full height

I'm in the process of designing a website for my sisters' band and I'm struggling to develop a mobile menu with full width and height in Wordpress (using PHP). The theme being used is Genesis. Can anyone provide assistance with this? Feel fr ...

phpcsswordpress

Apply the animate.css classes before removing the element

I'm struggling to add and remove CSS classes on my label/checkbox tick, as well as removing the item once it's been checked. I can only manage to do one of these tasks at a time. $(function () { $("label[for='<%= @todo.id %>' ...

javascriptjquerycssruby-on-rails

Tips for integrating jQuery styling into Angular 2

Using the farbtastic color picker, I am trying to pass the color code from jQuery to the HTML element with the property [style.backgroundColor]="color" when a button is clicked. HTML: <button ion-col full clear id="color-picker-handler" (click)="initi ...

jquerycssangularionic2

What is the best way to eliminate vertical spacing among li elements in CSS

I am facing a challenge with my HTML code and styling, which is just an example: <div id="mn" style="margin-top:200px;"> <div class="first">1</div> <div class="second">2</div> & ...

cssmarginspacing

Struggling to get image properly aligned using touch gestures

Currently, I am struggling with the task of centering my image based on the touch input that will drag it. For example, if the user touches the top right corner of the image, I want the image to automatically move so that its center aligns with that touch ...

javascripthtmlcss

"Use jQuery to select all the cells in a row except for the

I found a visually appealing table layout that looks like this : https://i.stack.imgur.com/oRxYP.png What caught my attention is how clicking on a row selects the entire row. Take the example in the image above, where the second row is highlighted upon s ...

javascriptjqueryhtmlajax

centered logo in a flexbox header

Having trouble with Flex for the first time. Despite reading and experimenting, I still can't figure it out. Any suggestions on how to accomplish this? Check out an example ...

cssflexbox

Center a grid of cards on the page while keeping them aligned to the left

I have a grid of cards that I need to align in the center of the page and left within the grid, adjusting responsively to different screen sizes. For example, if there are 10 cards and only 4 can fit on a row due to screen size constraints, the first two ...

javascriptcssreactjstypescriptmaterial-ui

At what point does a box create an inline formatting context?

According to my research, I came across a situation where a block formatting context is generated as explained in MDN:Block formatting context. I am curious about the scenarios that lead to the establishment of an inline formatting context within a box. ...

css

Ordering data in a dynamic table using JavaScript

After receiving an array of objects in the form of a JSON file and using AJAX to display specific key-value pairs in a table, I am now faced with the task of sorting the rendered table. However, I am uncertain about the steps to take next. <div id=" ...

javascripthtmljquerycssajax

Is there a method in JS/jQuery to fill my input field with a constant string and ensure leading zeros are included?

I am looking to create an input textbox that starts with a fixed string followed by up to 6 leading zeros. As the user types in the input box, the leading zeros will be automatically removed once the maximum length of 6 characters is reached. The initial s ...

javascripthtmljquery

Text hyperlink populates form fields

I am interested in learning how to create a clickable text link that can automatically populate specific information in a form located above it. For example, I have a donation form with fields for amount, country, and projects. Below this form, there are ...

javascriptjqueryhtmlforms