Unable to apply the CSS `::first-letter` pseudo-element using the `:not

One of the tasks at hand is to increase the size of the initial letter in each P element that does not have the class ejemplo or the id lectura.

The following code snippet accomplishes this successfully:

p::first-letter {
  font-size: 300%;
}

However, trying to adjust it based on the requirements like below does not yield the desired result:

p::first-letter:not([class="ejemplo"]):not([id="lectura"]) {
  font-size: 300%;
}

As a CSS beginner, I am unsure about what mistake I might be making.

Answer №1

Make sure to place the pseudo element ::first-letter at the end of your statement:

The sequence matters:

Check out MDN's documentation for more details:

You can only utilize one pseudo-element within a selector. It should appear after the simple selectors in your statement.

Thus:

p:not([class="ejemplo"]):not([id="lectura"])::first-letter {
  font-size: 300%;
}
<p>Lorem Ipsum Dolor Sit Amet</p>
<p class="ejemplo">Lorem Ipsum Dolor Sit Amet</p>
<p id="lectura">Lorem Ipsum Dolor Sit Amet</p>

Additionally...

Keep in mind that when selecting by ID, use #id instead of [id=''], and for classes, use .class instead of [class='']

p:not(.ejemplo):not(#lectura)::first-letter {

Answer №2

Application:

p:not([class="example"]):not([id="reading"])::first-letter {

Alternative approach:

p::first-letter:not([class="example"]):not([id="reading"]) {

Answer №3

Make sure to include the ::first-letter selector at the end.

p:not(.example):not(#read)::first-letter{
  font-size: 300%;
}
<p>test</p>
<p id="read">test</p>
<p class="example">test</p>

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

Universal compatibility for web displays

I've been conducting testing on a website across Chrome, Firefox, and Internet Explorer, utilizing the CSS code snippet below: #foot_links1, #foot_links2, #foot_links3 { position: absolute; margin-top: 55px; margin-top: 14em; color: # ...

Experiencing issues with content rendering in a Cordova iOS app when utilizing the CSS property -webkit-overflow-scrolling: touch

Encountering a rendering problem in a Cordova iOS app with the CSS property -webkit-overflow-scrolling: touch. I have already included this property in the config.xml file. ...

When the text is long, it does not extend all the way to the right

I am working on designing a login page and have created an input text field for the user's email address. However, I have noticed that when the email address is long, there is some space left at the end of the border (I suspect it may be due to paddin ...

Thymeleaf is essential for proper functioning of external CSS stylesheets

I am puzzled about why I need to include the thymeleaf in both my HTML tags and in the link to my external CSS stylesheet in the head section. If I remove any of it, the stylesheet becomes disconnected from the HTML document. So, what is the necessity of ...

Can a hyperlink exist without a specified href attribute?

One scenario could be when I receive this specific code from a third-party source <a class="cs_import">Add contacts from your Address Book</a> Curiously, the link "Add contacts from your Address Book" does not redirect to any page as expected ...

What is causing Firefox to consistently shave off 1px from the border of table cells?

Why is Firefox removing 1px from the border's value as defined in the CSS file? .aprovGriditem th { border-collapse: collapse; border: 4px solid #BBC6E3; padding: 0; } UPDATE <table cellpadding="0" cellspacing = "1" runat="server" id= ...

Using the use tag for SVG fills is a great way to

Currently, I am attempting to modify the color of an SVG that is displayed on various pages using the code <svg id="logo-svg"><use xlink:href="#kmc-logo"></use></svg>. You can find the methods I have been experimenting with here: h ...

Challenges with the Placeholder and Text Alignment in Angular Material's Text Area

I am currently facing an issue with a textarea in Angular, which is displayed as shown below: https://i.sstatic.net/jjUlT.png My Angular code for the textarea is as follows: <div *ngIf="whetherDisplay()" class="textarea-text"> <mat-form-field ...

Design a hover zone that allows for interaction without disrupting click events

I am looking to create a tooltip box that appears when hovering over an element, and I want the tooltip to only disappear when the user's mouse exits a specific custom hover area outlined by a vector graphic. My current implementation is working, but ...

Is there a way to resolve the warning message "The shadow-piercing descendant combinator (>>>) is deprecated" that appears when running ng build for production?

I keep receiving warnings when I run ng-build -c production for all my styles that contain the '>>>' notation. Warning: ▲ [WARNING] Unexpected ">" /Users/mike/project2022/client/src/app/bank/bank-new/bank-new.component.ts-angular- ...

Why is the "text-overflow: ellipsis" property of a parent div not functioning properly for its child div?

Why is the CSS property text-overflow: ellipsis not working on a child div with the class name cluster-name? .ft-column { flex-basis: 0; flex-grow: 1; padding: 4px; text-overflow: ellipsis; overflow: hidden; } .ft-column > .cluster-name { ...

The functionality of a Cordova application using Framework 7 CSS can vary across different Android devices

A link is shared for reference showcasing how the progress bar appears on Samsung j2 and other Android devices. Here is the link: [https://i.sstatic.net/C9OpS.jpg](https://i.sstatic.net/C9OpS.jpg) On my personal device, the progress bar is displayed at th ...

Adjusting the size of a division element to match the dimensions

Currently, I am still in the process of finalizing the remainder of the page, but I have encountered a minor issue. The problem lies in my image div not matching the height of the container. Although the image itself is the correct size, the image div appe ...

Position the link to the right of the menu using CSS styling

I'm attempting to position a link next to my menu using CSS, but due to my limited experience with CSS I'm struggling to achieve the desired result. Currently, the link appears at the bottom left of the menu section. The code for the menu and lin ...

Check to see if the menu item exceeds the allotted space, and if so, display the mobile menu

Currently, I am in the process of creating a unique responsive menu for my website that I think will need some JavaScript implementation. My skills with JavaScript are not very strong, so I am looking for guidance, code examples, or resources that can assi ...

Creating a dynamic child dropdown that expands to fit a table-cell parent element in MUI

I'm facing an issue where I have a parent element set to display as table-cell, and within it, I have a dropdown child element that I want to expand to occupy the entire available space within the parent element. Despite trying various solutions such ...

Craft a Unique Responsive Background Design

I'm eager to create a background like this, but I'm struggling to figure out the best approach. My attempt with transform: skewY(-6deg) ended up skewing my entire page instead of just the background. Could someone please assist me in finding th ...

Step-by-step guide on crafting a scrolling marquee with CSS or Javascript

I am in need of creating two marquees for a website project. The first marquee should showcase a repeating image while the second one should display links, both spanning the browser window at any size. It is crucial that the marquee items are displayed fro ...

The header section on a website not behaving as expected in the Chrome browser

For my website, I want it to look like this in Internet Explorer: https://i.stack.imgur.com/hSkVM.png ^^ This is the IE view However, in Chrome, it displays like this: https://i.stack.imgur.com/noQw8.png The issue is with the Top bar on Chrome showing co ...

Customize the Placement of the Add to Cart Button in Woocommerce using CSS

How can I ensure that the “Add to Cart” button remains aligned properly on the shop page, even when the product names vary in length? I attempted to implement this CSS code, but it only seems to work when hovering over the button. .woocommerce .prod ...