How can I focus on a particular P element within this Div using CSS?

I am attempting to target a paragraph element within the code snippet below. I want to create a class that applies text-shadow to the text of that specific paragraph.

However, I am unsure which class to focus on and what the correct syntax should be. I initially tried using .mainbg p { xxxxxx }, but it did not yield the desired result.

<section aria-label="home" class="mainbg" id="home">
  <!-- intro -->
  <div class="container">
    <div class="row">
      <div class="overlay-main v-align">
        <div class="col-md-10 col-xs-11">
          <h1 class="onStep" data-animation="animbouncefall" data-time="300">LOUIS WALLACE CONSTRUCTION</h1>
          <div
            class="onStep"
            data-animation="fadeInUp"
            data-time="600"
            id="slidertext"
            style=" text-shadow: 2px 1px 4px black;"
          >
            <h3 class="main-text">Oroville General Contractor</h3>
            <h3 class="main-text">Over A Decade Of Experience</h3>
            <h3 class="main-text">All Phases Of Construction</h3>
          </div>
          <p
            class="onStep"
            data-animation="animbouncefall"
            data-time="900"
            style="font-weight:500"
            style="text-shadow:20px 20px 20px black;"
          >
            No matter how large or small the project, we ensure that your project is completed with precision and
            professionalism. We take pride in our quality craftsmanship, our attention to detail, and our open line of
            communication with each and every customer. With each project, we understand that our role is about more
            than simply putting up walls — it’s about ensuring that your vision is turned into a reality.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

Answer №1

First and foremost, there are two inline styles for the css on your p tag, but only the first one will be applied:

<p class="onStep" ... style="font-weight:500" style="text-shadow:20px 20px 20px black;">...</p>

The correct format should be:

<p class="onStep" ... style="font-weight:500; text-shadow:20px 20px 20px black;">...</p>

The selector .mainbg p should work as expected, but remember that inline styles take precedence over the .mainbg p selector.

Avoid using inline css in such cases if possible.

Answer №2

Add an ID to the div and focus on styling the <p> tag:

<!-- introduction -->
<div class="container">
<div class="row">
<div class="overlay-main v-align">
  <div class="col-md-10 col-xs-11" id="divwithp">

    <h1 class="onStep" data-animation="animbouncefall" data-time="300">LOUIS WALLACE CONSTRUCTION</h1>
    <div class="onStep" data-animation="fadeInUp" data-time="600" id="slidertext" style=" text-shadow: 2px 1px 4px black;">
      <h3 class="main-text">Oroville General Contractor</h3>
      <h3 class="main-text">Over A Decade Of Experience</h3>
      <h3 class="main-text">All Phases Of Construction</h3>
    </div>
    <p class="onStep" data-animation="animbouncefall" data-time="900" style="font-weight:500" style="text-shadow:20px 20px 20px black;">No matter how large or small the project, we ensure that your project is completed with precision and professionalism. We take pride in our quality craftsmanship, our attention to detail, and our open line of communication with each and every customer. With each project, we understand that our role is about more than simply putting up walls — it’s about ensuring that your vision is turned into a reality.
 </div>
</div>
</div>

#divwithp p{
//add CSS properties here
}

You can also target the <p> tag by its class:

.onStep{
//add CSS properties here
}

Answer №3

To target a specific paragraph tag effectively, it is recommended to assign it a unique id.

<p id="myPTag"></p>

You can then style it using CSS like this:

#myPTag {

    // Your styles here...
}

If you want to target all paragraph tags, you can do so with CSS like this:

div p {
    // Your styles here...
}

Alternatively, you can target paragraphs within a specific div like this:

#home p {
    // Your styles here...
}

Additionally, using .mainbug p { should also work as Caiovisk pointed out.

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

ways to undo modifications made to a value within an input field using jquery or javascript

$(document).ready(function () { //Highlight row when selected. $(function () { $('#Cases tr').click(function () { $('#Cases tr').removeClass('selectedRow'); $(this).addClass(&apos ...

JQuery form not triggering the submit event

Currently, I am facing some issues with my code while trying to trigger on submit event on a form and validate it. The main problems I encountered are that the onsubmit event is not being triggered, and the input field of type email is not validated proper ...

Incorporating rounded corners to an embedded YouTube video

Check out this JSFiddle link. The border-radius property appears to be working correctly at first, but then the rounded corners suddenly disappear shortly after loading. Is there a way to apply rounded corners to YouTube videos that are embedded on a webp ...

When the HTML code is rendered in a web browser, the CSS styles are not being

I am utilizing adminer within a docker container. When testing services, I utilize the URL mydomain.tld. In order to interact with this container directly, one option is to expose and map a port, such as mapping port 8081 to the adminer port 8080. Access ...

What is the process for attaching a dynamically generated object to the document's readiness event?

One of my tasks involves dynamically generating a slider element using the code snippet below: function NewDiv(){ for (var count=0; count < parseFloat(sessvars.storey_count); count++) { var string="<br><div ...

Painting Magic: Exploring the World of Canvas Zoom and Moves

I'm having trouble implementing zoom and pan functionality for this particular canvas drawing. While there are examples available for images, my case is different since I am not working with images. Any tips or suggestions on which libraries to use wo ...

Problem with displaying images and videos in a lightbox gallery

Currently, I am encountering an issue with the lightbox feature on my website. When trying to play a video, there seems to be a layer (div tag) blocking it, preventing me from playing or stopping the video. This problem occurs when clicking on an image fir ...

I attempted to craft a toggle button by applying and removing an active class that I had previously designed, but unfortunately, it did not function as intended

Every time I click on a button, I keep encountering this error message. I am certain that my selector is correct, but I can't seem to figure out why I'm getting the Uncaught TypeError: Cannot read property 'classList' of undefined at HT ...

What is the best way to unselect the "all" selector if one of the inputs is no longer selected?

I am facing an issue with a search filter functionality. When all filters are selected and then deselected individually or together, the "all" button remains selected. I need help in ensuring that when any filter is deselected, the "all" button also gets d ...

Is there a way to transfer a value set from one tpl file to another tpl file in cscart using smarty template engine?

I am trying to retrieve the value of a variable set using an input tag from one tpl file. Here is the input tag in A.tpl file: <input type="checkbox" class="checkbox" name="payment_data[processor_params][enable_addbillcard]" id="optional_enable_addbil ...

One effective way to create a dynamic and engaging multi-step process using a combination of AJAX, jQuery

In PHP, the steps are counted and stored in a session to prevent going back to the beginning when updating or refreshing the page. The value is retrieved using the variable $step. <?php session_start(); if ( !empty($_SESSION['datos_form' ...

Using FlexBox for Vertical Alignment of Elements

Experimenting with FlexBox (for demonstration purposes only). I am facing a challenge in vertically centering text within the parent .top-nav-bar. While using justify-content: space-between, I have successfully aligned two elements horizontally, but I am s ...

Creating a SVG polygon using an array of points in JavaScript

Consider the following array containing points: arr = [ [ 0,0 ], [ 50,50 ], [ 25,25 ], ]; I would like to create an SVG polygon using this array. Initially, I thought the code below would work, but it doesn't: <polygo ...

Multiple images overlapping each other in a dynamic parallax effect

Despite my fear of receiving down votes, I have been unsuccessful in finding the answer to my question so I will proceed with asking it. I am attempting to replicate a parallax effect similar to the one showcased on this website, particularly the image of ...

Changing the content of a DOM element containing nested elements using JavaScript/jQuery

Need some help with a DOM element that looks like this: <span>text</span> <b>some more text</b> even more text here <div>maybe some text here</div> How can I replace text with candy to achieve this result: <span> ...

Python (Selenium): Error - An unexpected issue arose during the execution of the given command

Encountered an issue with my Python code that is responsible for downloading data from a table on a web page and saving it to a local CSV file. The error message suggests an unknown error occurred during processing. See below for more details. Error Messa ...

The implementation of CSS in one React component has an impact on the functionality of the Ant Design Select component in

I've run into a puzzling issue where importing CSS styles in one React component is impacting the appearance of Ant Design's Select component in another component. Let me break down the scenario: The setup involves two React components, namely P ...

What is the reason for the inconsistency in CORS post requests working for one scenario but not the other?

Currently, I am facing an issue while attempting to add email addresses to a mailchimp account and simultaneously performing other tasks using JavaScript once the email is captured. Here's the snippet of my JavaScript code: function addEmail(){ v ...

Showcasing Items Within JSON Object in Angular

I am dealing with a JSON database that contains nested Objects: { "characters2": [ { "campaign":"Menagerie Coast", "index": 1, "name": "Mark Whithershmitz", "portrait": "assets/pics/markW.jpg", "affiliation": "Kryn Dynast ...

Insert text into the cursor location within Summernote using JQuery

Currently, I am working on a flutter application where I have implemented the summernote editor using JQuery. ClipboardData data = await Clipboard.getData(Clipboard.kTextPlain); String txtIsi = data.text .replaceAll("'", '\&bsol ...