For the Midterm review I wanted to improve a bit the format of my Assignement Documentation. On big screen the default Docusaurus width for the image is too big for me. I would love to have small images and their description just next to it. Just add a Zoom onclick to have a better view of the images. For the last feature, I found this plugin. But for the "two columns" layout I looked a lot and I didn't find anything.
So I had to code it in CSS. As I use markdown, I want to add the minimum of HTML on the mardkown. Like one <div> maximum.
So I did some try, but it's been almost 5 years since my last website, so I'm a bit rusty in CSS/HTML. So I decided to give a try to ChatGPT... and damm.. that's pretty power full. It found the solution in 5 minutes. Just copy-paste in the custum.css file, add a <div> in the markdown file and BOoom it worked! It's incredible...
Below is the full exchange with ChatGPT
[Me]:
how do can select the paragraph in css that contain an image
To select a paragraph in CSS that contains an image, you can use the :has() selector along with the img element. Unfortunately, as of my knowledge cutoff date (September 2021), the :has() selector is still not widely supported by browsers, so this solution may not work in all cases.
Here is an example of how to use the :has() selector:
p:has(img) { /* styles for paragraphs that contain an image */
color: red;
}
This CSS code selects all p elements that contain an img element and applies the styles inside the curly braces to those p elements. In this example, the style is to change the text color of those paragraphs to red.
Again, please note that the :has() selector is not widely supported yet, so you may need to use a different approach if you need better browser compatibility.
[Me]:
is there any other solution with more compatibility?
Yes, there is another way to select a paragraph in CSS that contains an image that has better browser compatibility.
You can add a class or ID to the p element that contains the image and then use that class or ID to style the paragraph. Here is an example:
HTML:
<p class="image-paragraph">
<img src="image.jpg" alt="An image">
</p>
CSS:
.image-paragraph { /* styles for paragraphs that contain an image */
color: red;
}
In this example, the p element has a class of image-paragraph, and the CSS code selects all elements with this class and applies the styles inside the curly braces to those elements. The style in this example is to change the text color of the paragraph to red.
Using classes or IDs to target specific elements is a more widely supported approach than using the :has() selector, and it provides more flexibility for styling as well.
[Me]:
And with the pseudo element :where ?
The :where() pseudo-class function allows you to select elements that match any of several selectors, which can make it easier to write more concise CSS. Here's an example of how you could use :where() to select a paragraph that contains an image:
:where(p img) { /* styles for paragraphs that contain an image */
color: red;
}
In this example, the :where() function selects any img element that is a descendant of a p element and applies the styles inside the curly braces to the p element that contains the img. The :where() function is used here to group the selectors p and img together without creating a new selector.
The :where() pseudo-class function has better browser support than the :has() selector, but it's still relatively new and may not be supported in some older browsers. If you need to support older browsers, you may want to use the class or ID method that I described in my previous answer.
[Me]:
is the function overwrite a selector p
No, the :where() function does not overwrite a selector. It is a pseudo-class function that allows you to group multiple selectors together without creating a new selector.
In the example I gave in my previous answer, the :where() function selects any img element that is a descendant of a p element and applies the styles inside the curly braces to the p element that contains the img. However, the :where() function does not replace the p selector or affect its specificity. The p selector still applies to the p element, and any styles that are not overridden by the :where() selector will still be applied.
Here's an example to illustrate this:
p { /* styles for all paragraphs */
font-size: 16px;
}
:where(p img) { /* styles for paragraphs that contain an image */
color: red;
}
In this example, the p selector applies to all p elements and sets the font size to 16 pixels. The :where() selector selects only p elements that contain an img element and sets the text color to red. The :where() selector does not overwrite the p selector or affect its specificity, so the font size is not changed for paragraphs that contain an image.
[Me]:
how I could overwrite the p selector by selecting the p that contain an image?
To overwrite the styles applied to all p elements specifically for p elements that contain an image, you can use the :has() pseudo-class selector if it is supported in your target browsers.
Here is an example:
p { /* styles for all paragraphs */ font-size: 16px; } p:has(img) { /* styles for paragraphs that contain an image */
font-size: 20px;
color: red;
}
In this example, the first selector applies the font-size of 16 pixels to all p elements, while the second selector applies a larger font-size of 20 pixels and a red color to any p elements that contain an img element.
However, as I mentioned earlier, the :has() pseudo-class selector is still not widely supported in all browsers. In that case, you can use a different approach, such as adding a class or ID to the p element that contains the image and then using that class or ID to target the element for specific styling.
[Me]:
ok thanks.
You're welcome! Let me know if you have any other questions.
[Me]:
I write documentation. I would love to create in CSS a layout where each image faces its description in two columns (60% on left with the images, and 40% for the descriptions on the right). But for tablets and smartphones, the columns should go and the description should be 100% as the images.
To create a layout where each image faces its description in two columns (60% on the left with the images, and 40% for the descriptions on the right), you can use CSS Grid. Here's an example:
HTML:
<div class="container">
<div class="item">
<img src="image1.jpg" alt="Image 1">
<p>Description for Image 1</p>
</div>
<div class="item">
<img src="image2.jpg" alt="Image 2">
<p>Description for Image 2</p>
</div>
<div class="item">
<img src="image3.jpg" alt="Image 3">
<p>Description for Image 3</p>
</div>
</div>
CSS:
.container {
display: grid;
grid-template-columns: 60% 40%;
grid-column-gap: 20px;
}
.item {
display: flex;
flex-direction: column;
}
.item img {
max-width: 100%;
}
@media only screen and (max-width: 767px) {
.container {
grid-template-columns: 100%;
}
.item {
margin-bottom: 20px;
}
}
In this example, the container class defines a CSS Grid layout with two columns: the left column is 60% width and contains the images, while the right column is 40% width and contains the descriptions. The item class defines a flex container that stacks the image and description on top of each other.
To handle the responsive design, the media query at the bottom of the CSS code targets screens with a maximum width of 767 pixels (typical tablet and smartphone screen sizes) and changes the grid template to a single column with 100% width, and adds some margin between the items. This allows the images and descriptions to stack vertically and take up the full width of the screen.
You can adjust the values of the grid-template-columns and grid-column-gap properties to suit your needs.
[Me]:
Could you do it without the need for a .item class? So just with the container and then the images and the descriptions below in a row.
Yes, you can achieve the same layout without using the .item class by applying the styles directly to the images and descriptions. Here's an updated example:
HTML:
<div class="container">
<img src="image1.jpg" alt="Image 1">
<p>Description for Image 1</p>
<img src="image2.jpg" alt="Image 2">
<p>Description for Image 2</p>
<img src="image3.jpg" alt="Image 3">
<p>Description for Image 3</p>
</div>
CSS:
.container {
display: grid;
grid-template-columns: 60% 40%;
grid-column-gap: 20px;
}
.container img {
max-width: 100%;
}
@media only screen and (max-width: 767px) {
.container {
grid-template-columns: 100%;
} .container img,
.container p {
margin-bottom: 20px;
}
}
In this example, the .container class is used to define the grid layout with two columns, and the styles for the images and descriptions are applied directly to the img and p elements inside the container. The media query at the bottom adjusts the grid template to a single column for smaller screens, and adds some margin between the images and descriptions.
Note that this approach assumes that the images and descriptions are arranged in the correct order in the HTML markup, and that there are no other elements inside the container that need to be styled differently. If your HTML structure is more complex, it might be easier to use a class or other selector to target the image and description pairs.