Styling drop caps using CSS on Wordpress posts

I've successfully implemented a customized dropcap for my Wordpress blog posts using CSS. Is there a way to limit this effect to just the first paragraph, leaving subsequent paragraphs unaffected?

Any guidance on achieving this would be highly appreciated. Thank you in advance.

.dropcap p::first-letter {
  font-size: 4rem !important;
  color: #8A8A8A;
  margin-right: 10px;
  margin-bottom: 8px;
  line-height: 1.8rem;
  font-family: 'Baskerville', serif;
}

.dropcap p:first-of-type::first-letter {
  font-size: 4rem !important;
  color: #8A8A8A;
  margin-right: 10px;
  margin-bottom: 8px;
  line-height: 1.8rem;
  font-family: 'Baskerville', serif;
}
<div class="dropcap">
  <pre></pre>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <em>This is italic text</em>, <strong>this is bold text</strong>, <em><strong>this is bold italic</strong></em> text. Donec justo massa, imperdiet ac efficitur sit amet, pretium a nunc. Aliquam
    sem nisi, sagittis a lacus ut, pulvinar molestie magna. Nam aliquam tincidunt erat nec pulvinar. Nullam urna nunc, cursus nec pharetra eu, euismod id dolor. Duis imperdiet, ante iaculis suscipit pharetra, mauris neque ultricies lacus, tincidunt posuere
    lectus ipsum ac est. Donec odio nunc, feugiat nec mi eget, faucibus euismod urna. Donec pretium sit amet leo eget auctor. Nulla consequat metus at ullamcorper faucibus. Donec ultricies tristique velit sit amet commodo. Morbi bibendum, nulla ut aliquam
    bibendum, ex lacus lacinia dui, quis sagittis justo neque vel mauris. Phasellus varius dapibus sapien, et euismod turpis. Praesent elit metus, posuere nec ipsum eget, ultricies lobortis massa.</p>

  <p>Quisque ornare libero id nibh imperdiet ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc fringilla urna in mauris consequat, eget lobortis elit sodales. Curabitur ipsum ligula, tincidunt eu venenatis
    quis, ullamcorper et nunc. Sed in hendrerit felis, eu fermentum mauris. In varius non urna at ullamcorper. Duis at arcu nibh. Vivamus et elementum purus. Nulla a tellus dapibus, tristique libero ut, porta odio. Nulla luctus aliquet tempus. Pellentesque
    ultrices finibus turpis, non vestibulum metus.</p>

</div>

https://i.sstatic.net/dftdE.png

htmlcss

Answer №1

It seems like the issue you're facing is that the first rule is being applied as well. To resolve this, try removing the following section of code:

.dropcap p::first-letter {
  font-size: 4rem !important;
  color: #8A8A8A;
  margin-right: 10px;
  margin-bottom: 8px;
  line-height: 1.8rem;
  font-family: 'Baskerville', serif;
}


.dropcap p:first-of-type::first-letter {
  font-size: 4rem !important;
  color: #8A8A8A;
  margin-right: 10px;
  margin-bottom: 8px;
  line-height: 1.8rem;
  font-family: 'Baskerville', serif;
}
<div class="dropcap">
  <pre></pre>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <em>This is italic text</em>, <strong>this is bold text</strong>, <em><strong>this is bold italic</strong></em> text. Donec justo massa, imperdiet ac efficitur sit amet, pretium a nunc. Aliquam
    sem nisi, sagittis a lacus ut, pulvinar molestie magna. Nam aliquam tincidunt erat nec pulvinar. Nullam urna nunc, cursus nec pharetra eu, euismod id dolor. Duis imperdiet, ante iaculis suscipit pharetra, mauris neque ultricies lacus, tincidunt posuere
    lectus ipsum ac est. Donec odio nunc, feugiat nec mi eget, faucibus euismod urna. Donec pretium sit amet leo eget auctor. Nulla consequat metus at ullamcorper faucibus. Donec ultricies tristique velit sit amet commodo. Morbi bibendum, nulla ut aliquam
    bibendum, ex lacus lacinia dui, quis sagittis justo neque vel mauris. Phasellus varius dapibus sapien, et euismod turpis. Praesent elit metus, posuere nec ipsum eget, ultricies lobortis massa.</p>

  <p>Quisque ornare libero id nibh imperdiet ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc fringilla urna in mauris consequat, eget lobortis elit sodales. Curabitur ipsum ligula, tincidunt eu venenatis
    quis, ullamcorper et nunc. Sed in hendrerit felis, eu fermentum mauris. In varius non urna at ullamcorper. Duis at arcu nibh. Vivamus et elementum purus. Nulla a tellus dapibus, tristique libero ut, porta odio. Nulla luctus aliquet tempus. Pellentesque
    ultrices finibus turpis, non vestibulum metus.</p>

</div>

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

Does IE 9 support endless local storage capacity?

I recently updated my HTML5 persistent storage (localStorage) capacity testing to address a memory exception issue in the previous version. I even created a jsFiddle showcasing it: http://jsfiddle.net/rxTkZ/4/ The testing code involves a loop: var val ...

javascripthtmlinternet-explorer-9local-storage

Verify the placement within the text box

Are there methods available in JavaScript or any JavaScript framework to determine the position within a textbox? For example, being able to identify that figure 1 is at position 2 and figure 3 is at position 3. Figure 1 Figure 2 ...

javascriptjqueryhtml

Issue with non-responsive images in Bootstrap 3

Here is the bootstrap configuration that I am currently using: http://www.bootply.com/118172 I'm having an issue with the responsiveness of the image. It's not shrinking to match the height of the div on the left side. Can anyone help me trouble ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Extracting data from several pages using the same URL, but with varying ajax responses

I've been attempting to scrape all the reviews for a specific book on Goodreads.com. url= https://www.goodreads.com/book/show/320.One_Hundred_Years_of_Solitude?ac=1&from_search=true The initial scrapping of the first page was successful using Py ...

pythonhtmlajaxweb-scrapingbeautifulsoup

Tips for retaining filled data after an incomplete form submission

<html> <head><script type="text/javascript"> function pa(){ var fname = document.getElementById('fname').value; var lname = document.getElementById('lname').value; var email = document. ...

javascripthtmlajax

Prevent the wrapping of elements in an expanded hover state

Check out the Latest Demo: https://fiddle.jshell.net/Benihana77/cjtg5ojf/ The Scenario: I have designed a versatile promo where the main text and the button/link text can vary in length. The button/link is placed inline, with an extended arrow that expan ...

css

The comparison between createElement() and AJAX response

Currently, my website has a login form that updates the page with user data through AJAX after successful login. To maintain semantic integrity, I use JavaScript to remove the login form from the page once the user is logged in. However, when the user lo ...

javascriptjqueryhtmlajax

The styles applied to the Angular 5 Component host element are not being reflected correctly in jsPlumb

As a beginner in Angular >2 development, I am excited to build my first application from scratch. One of the features I'm trying to implement is drawing flow charts using jsPlumb. However, I have encountered an issue where the connectors are not be ...

javascriptcssangularjsplumb

PHP function unexpectedly prints out HTML content

In my html code, I have embedded a piece of php which is meant to dynamically change the styling of a tag based on the data from the URL. The specific scenario involves an html login form structured as follows: <form class="userdata" action=& ...

phphtml

Troubleshoot: Font Rendering Issue with CSS3 @font-face in Opera 11.x

Having some trouble with Opera not displaying my HTML5 site correctly. Everything looks good in Safari, Chrome, IE9, Firefox 3.5+ and more. Wondering if anyone has encountered this before and found a solution. Here's the breakdown of my setup: In the ...

cssoperafont-face

Links arranged in semicircles along the perimeter of the page

Here is some code that I have created to display two links in circles positioned on the left and right sides of a webpage. [class*="navigation"] .nav-previous, [class*="navigation"] .nav-next { position: fixed; z-index: 999; top: 50%; text-align ...

htmlcss

The divs contained are misaligned and not properly centered on the page

My container div contains 6 inner divs, but they are not properly centered on the page. Although the divs are equally spaced apart, they seem to be shifted to the left. I tried using 'justify-content: center' without success, and I suspect it mi ...

htmlcss

I am experiencing an issue where my JavaScript code does not redirect users to the next page even

I'm experiencing an issue with this code where it opens another webpage while leaving the login screen active. I've tried multiple ways to redirect it, such as window.location.href and window.location.replace, but nothing seems to be working. Ide ...

javascriptjqueryhtmlcss

Updating and Preserving Content in Angular

I've encountered an issue while working on a code that allows users to edit and save a paragraph on the screen. Currently, the editing functionality is working fine and the save() operation is successful. However, after saving, the edited paragraph do ...

javascripthtmlangulartypescript

Guide for Displaying Three Cards Side by Side using Bootstrap Grid System

I am facing an issue while attempting to display 3 cards in a row using the Bootstrap grid system. The problem arises when I use a Django loop, as each card is being displayed in a separate row instead of side by side as intended. I have tried implementing ...

htmldjangobootstrap-4

Creating a dynamic word cloud in D3: Learn how to automatically adjust font sizes to prevent overflow and scale words to fit any screen size

I am currently utilizing Jason Davies' d3-cloud.js to create my word cloud, you can view it here 1. I'm encountering an issue where the words run out of space when the initial window size is too small. To address this, I have a function that cal ...

javascriptcssangularjsd3.jsword-cloud

Button color changes upon submission of form

Can anyone help me figure out how to change the color of a submit button after a form submission using Twitter Bootstrap 3? I have a form with multiple buttons serving as filters for my product page, but I can't seem to change the color of the selecte ...

javascriptphpjqueryhtmlinput

Use jQuery to gather all the values from an HTML select element

I am using PHP to generate a HTML select option based on folders in a directory. Now, I am looking for a way to retrieve the value of the selected option in my jQuery script. I am familiar with $('#select :selected').text() and $(#select).val(), ...

jqueryhtmlhtml-select

Trigger a keypress event following the activation of a button

I've been trying to simulate the press of the backspace key on the keyboard after clicking a button, but all my attempts have been unsuccessful. Here is the code I'm using: function rtf(){ document.getElementById("u0u").focus(); $('#u0u ...

javascriptjqueryhtml

Extracting Text from a Span Element Using XPath in Selenium

Here is the HTML code snippet: <div class="a-row a-spacing-small a-size-small"> <div class="a-row"> <a class="a-link-normal a-declarative g-visible-js reviewStarsPopoverLink" href="#" data-action="a-popover" data-a-popover="{"closeButton":" ...

javacssseleniumxpath